PDA

Click to See Complete Forum and Search --> : Empty DIV's in IE, how do you fix that?

phpnstuff
09-21-2007, 11:29 AM
I have a div set to 10px height, but since IE is buggy it doesn't follow orders. I've searched all over google and tried all the methods, nothing works. Anyone have a css hack to make an empty div stay at the small height I want it across all browsers.
Webnerd
09-21-2007, 11:44 AM
Do you have a full DOCTYPE in your HTML document?
phpnstuff
09-21-2007, 11:50 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Webnerd
09-21-2007, 12:18 PM
Try sticking a comment tag in it:

<div><!-- --></div>
phpnstuff
09-21-2007, 12:20 PM
I did that...

<div style="height: 10px; overflow: hiden;"><!-- --></div>
curious_george
09-21-2007, 12:26 PM
div.empty {
height: 10px;
background-color: black;
overflow:hidden;
}

of course where "empty" is the class of the div.
curious_george
09-21-2007, 12:27 PM
I did that...

<div style="height: 10px; overflow: hiden;"><!-- --></div>
hidden has two "d"s, not just one.
phpnstuff
09-21-2007, 12:50 PM
Here's another example:

#sub_nav_lnks {
width: 729px;
height: 60px;
background-image: url('../images/layout/sub_nav_lnks_bg.gif');
background-repeat: no-repeat;
padding: 0px 0px 0px 0px; /* TOP, RGT, BTM, LFT */
overflow: hidden;
float: none;
}

Mozilla shows 60px, IE 7 & 6 show 72px height.
Webnerd
09-21-2007, 01:10 PM
I don't have any problems with IE6 or IE7 using that class on an empty DIV tag.
Webnerd
09-21-2007, 01:13 PM
Are you referring to IE on a Mac? If so, give it a width:100%
phpnstuff
09-21-2007, 01:20 PM
I'm using IE on a PC. That class works fine, but when I use the overflow function on it doesn't hold. Firefox, Opera shows the accurate 60px height, IE adds the extra 12px. Would I attach that class to my div, is that a hack or did you just do that class as an example. Why would it work on that but not on my div?
Webnerd
09-21-2007, 01:27 PM
Using this:

<style type="text/css">
div.empty {
height: 10px;
background-color: black;
overflow:hidden;
width:100%;
}
</style>

<div class="empty"></div>


Works fine for me
curious_george
09-21-2007, 01:38 PM
Your code works fine for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#sub_nav_lnks {
width: 729px;
height: 60px;
background-image: url('../images/layout/sub_nav_lnks_bg.gif');
background-repeat: no-repeat;
padding: 0px 0px 0px 0px; /* TOP, RGT, BTM, LFT */
overflow: hidden;
float: none;
}
</style>
</head>
<body>
<div id="sub_nav_lnks">
</div>
<br>
<div class="not-empty">
<img src="../images/layout/sub_nav_lnks_bg.gif">
</div>
</body>
</html>

Both divs have the same height.
felgall
09-21-2007, 02:30 PM
Try setting the line-height to 0 and see if that helps.
WebJoel
09-21-2007, 05:56 PM
<div style="height: 10px; overflow: hiden;"><!-- --></div> Typo? "hidden".
What is your current code? Is this online anywhere? :)
s.b37
09-22-2007, 02:08 AM
try adding a &nbsp; (a non-breaking space?)

it doesn't show up as anything and prevents the div being empty (and collapsing)
WebJoel
09-22-2007, 12:30 PM
Or a logical HTML empty comment <!-- --> Often in IE, to prevent a 'warnings' on validation of a 'clearing div', you need at least an 'empty !comment tag' to give the DIV something to contain.. This might be similar.