SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Sep 19, 2007, 10:28 #1
- 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>
-
Sep 19, 2007, 10:38 #2
- 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>
-
Sep 19, 2007, 11:26 #3
- 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>
-
Sep 19, 2007, 12:07 #4
- 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;}
-
Sep 19, 2007, 12:14 #5
- 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?
-
Sep 19, 2007, 12:48 #6
- 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%; 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