SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    White space issue with display:none

    I'm using display:none to hide a div, but I see white space where the div would be in both Firefox and Safari (haven't tested on any other browsers). I feel like I'm missing something obvious. Any help would be greatly appreciated. Here's my code:

    Styles:

    Code:
    .whiteRow {
    	width:335px;
    	padding: 8px 12px 8px 0px;
    }
    .blurb {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:11px;
    	color:#333333;
    	display:none;
    }

    HTML:

    Code:
    <div class="whiteRow">
           <a href="#">Title goes here</a>
            <div class="blurb">
             	Blurb goes here
            </div>
     </div>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Seems to work ?
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    .whiteRow {
    background:#ffffcc;
    width:335px;
    padding: 8px 12px 8px 0px;
    }
    .blurb {
    background:#ccffcc;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:11px;
    color:#333333;
    display:none;
    }
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <div class="whiteRow">
    
    <a href="##">Title goes here</a>
    
    <div class="blurb">Blurb goes here</div>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's just a piece of my code. Here's some more context:
    Code:
    <style>
    #contentWrapper {
    	padding: 8px 12px 0px 8px;
    	border-style: none solid solid solid;
    	border-color:#333333;
    	border-width:1px;
    	clear:both;
    }
    .whiteRow {
    	width:335px;
    	padding: 8px 12px 8px 0px;
    }
    .greyRow {
    	width:335px;
    	padding: 8px 12px 8px 0px;
    	background-color:#f4f4f4;
    }
    .blurb {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:11px;
    	color:#333333;
    	display:none;
    }
    .shareIcon {
    	float:right;
    	padding:8px 0px 8px 0px;
    	background-image:url(../images/share_icon.gif);
    	background-repeat:no-repeat;
    	width:13px;
    	height:13px;
    	vertical-align:top;
    }
    </style>
    
    <div id="contentWrapper">
        
        	<div class="whiteRow">
            	<a href="#">Title goes here</a>
                <div class="blurb">
                	Blurb goes here
                </div>
            </div>
            <div class="shareIcon">
            </div>
            
            
            <div class="clearDiv">
            
            <div class="greyRow">
            	<a href="#">Title goes here</a>
                <div class="blurb">
                	Blurb goes here
                </div>
            </div>
            <div class="shareIcon">
            </div>
    </div>

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ?
    .whiteRow,.greyRow {float:left;clear:both;
    width:335px;
    padding: 8px 12px 8px 0px;
    }
    .greyRow {background:#f4f4f4;}

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't seem to fix it. Any suggestions? Is there something I'm doing that will break the display:none?

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    is this what you want ? if not please a image how it is supposed to look, or even better a link to your page, Please
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    #contentWrapper {
    padding: 8px 12px 0px 8px;
    border-style: none solid solid solid;
    border-color:#333333;
    border-width:1px;
    clear:both;
    min-height:1&#37;;
    overflow:hidden;
    }
    * html #contentWrapper {height:1%;}
    
    .whiteRow,.greyRow{
    clear:both;
    float:left;
    width:335px;
    padding: 8px 12px 8px 0px;
    }
    
    .greyRow {background:#f4f4f4;}
    
    .blurb{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:11px;
    color:#333333;
    display:none;
    }
    .shareIcon {
    float:right;
    padding:8px 0px 8px 0px;
    background-color:#ffffcc;
    background-image:url(../images/share_icon.gif);
    background-repeat:no-repeat;
    width:13px;
    height:13px;
    vertical-align:top;
    }
    .fc{height:0;overflow:hidden;display:block;}
    </style>
    
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <div id="contentWrapper">
    
    <div class="whiteRow">
    <a href="##">Title goes here</a>
    <div class="blurb">Blurb goes here</div>
    
    </div>
    <div class="shareIcon">x</div>
    
    <span class="fc"></span>
    
    <div class="greyRow">
    <a href="##">Title goes here</a>
    <div class="blurb">Blurb goes here</div>
    
    </div>
    <div class="shareIcon">x</div>
    
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

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