Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2004
    Posts
    128
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Need some help with CSS display:

    I'm trying to hide everything in an element except the first letter. To do this, I'm wrapping all the text around in a <div>, and the first letter around in the <span> (I might be able to use :first-letter, but I want as much browser compatibility as I can get *cough*).

    Here's the code:
    Code:
    <div class='hide'><span>T</span>his is some text</div>
    Here's the CSS:
    Code:
    div.hide {
    display: none; }
    
    div.hide > span {
    display: block; }
    This doesn't work, and I'm not surprised because I've never really experimented with display in such a way so I'm probably going about it all wrong. >_>

    Anyone care to shed some light on me? =)

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello XtremeGamer99,
    Try it the other way around. Let the div normally display it's text and hide stuff inside the <span> tags.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    .box {
    	width: 700px;
    	margin: 20px auto;
    	background: #ccc;
    }
    .hidden {display:none;}
    </style>
    </head>
    <body>
        <div id="container">
        	<div class="box">
                <p>
                    L<span class="hidden">orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
                </p>
            <!--end hide--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    128
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Never thought of it that way! Thank you! =)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by XtremeGamer99 View Post
    This doesn't work, and I'm not surprised because I've never really experimented with display in such a way so I'm probably going about it all wrong. >_>

    Anyone care to shed some light on me? =)
    The correct property is visibility. Unlike with the display property, the visibility is not all or nothing; you can make the child elements of hidden elements visible.

    Here's a demo:
    Code:
    <!doctype html>
    <html>
    	<head>
    		<title>Demo</title>
    		<style>
    			div { display: block; margin: 2em; border: 0.1em solid; background: silver; color: black; }
    			h1, p { font-size: 1em; margin: 1em; }
    			/* Approach 1 */
    			div:first-child h1 + p { visibility: hidden; }
    			div:first-child h1 + p:first-letter { visibility: visible; }
    			/* Approach 2 */
    			div + div h1 + p { visibility: hidden; }
    			div + div h1 + p span { display: /* IE */ inline-block; visibility: visible; }
    		</style>
    	</head>
    	<body>
    		<div>
    			<h1>Approach 1</h1>
    			<p>Hi!</p>
    			<p>Only the first letter (i.e., “H”) of the paragraph above should be visible.</p>
    		</div>
    		<div>
    			<h1>Approach 2</h1>
    			<p><span>H</span>i!</p>
    			<p>Only the first letter (i.e., “H”) of the paragraph above should be visible.</p>
    		</div>
    	</body>
    </html>
    "Approach 1" only works in WebKit browsers (Google Chrome and Safari). I did a little reading and found out that implementors are not required to apply the visibility property to the first-letter pseudo-element, so the other browsers (Firefox, IE, and Opera) are still correct.

    "Approach 2" works in everything except IE. It's a bit surprising that this doesn't work in IE8 given that they were touting their CSS2.1 support awhile back. A little bit of experimentation revealed that they don't support reversing visibility on elements with display: inline, so I threw a display: inline-block declaration in there (with no change in appearance).
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •