White space issue with display:none

**stylegrl** · Sep 19, 2007, 10:28

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>

**all4nerds** · Sep 19, 2007, 10:38

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>

**stylegrl** · Sep 19, 2007, 11:26

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>

**all4nerds** · Sep 19, 2007, 12:07

Hello

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

**stylegrl** · Sep 19, 2007, 12:14

That doesn't seem to fix it. Any suggestions? Is there something I'm doing that will break the display:none?

**all4nerds** · Sep 19, 2007, 12:48

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>

The SitePoint Forums have moved.

User Tag List

Thread: White space issue with display:none

Thread Tools

Display

White space issue with display:none

Bookmarks

Bookmarks

Posting Permissions