Mysterious gap rendered in IE 6 and 7. IE8 displays OK

HTML & CSS
1

Hi

I have encountered a 5px gap when running the code below in IE6 and IE7, and I need some advise here. You can see this by clicking the yellow DIV (e.g “dright”) which will show a vertical gap appearing between:

<div id=“dclear”> and <div id=“dbottom”>

The problem does not appear in IE8. You can see it also in “IE8 Dev Tools” while in IE7 View/Std.

Attached html text file.

Thanks!

-Itai

<!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 id=“Head1”><title>

</title>
<style type=“text/css”>

&lt;/style&gt;

&lt;script type="text/javascript" language="javascript"&gt;
    function ddl_showhide(id) {
        var e = document.getElementById('dbottom');
        e.style.visibility = (e.style.visibility == 'hidden') ? 'visible' : 'hidden';
    } 
&lt;/script&gt;

&lt;style type="text/css"&gt;
    #dleft
    {
    	height:29px; 
    	width:200px; 
    	float:left; 
    	margin: 50px 0px 0px 0px; 
    	padding:0px; 
    	border:0px; 
    	background-color: #CCFFFF;
    	font-size:small;
    }

    #dright
    {
    	height:29px; 
    	width:17px; 
    	display:block; 
    	float:left; 
    	margin: 50px 0px 0px 0px; 
    	padding:0px; 
    	border:0px;
    	background-color:Yellow;
    }
    
    #dclear
    {
    	margin:0px; 
    	padding:0px; 
    	border:0px; 
    	height:1%; 
    	clear:both; 
    	line-height:0px; 
    	margin-bottom:0px;
    }
           
    #dbottom
    {
        width:215; 
        height:100px; 
        margin:0px; 
        padding:0; 
        border: solid 1px grey; 
        visibility:hidden; 
        background-color:blue               
    } 
           
    
&lt;/style&gt;

</head>
<body style=“margin:0; padding:0; border:0; position:relative;”>
<form name=“form1” method=“post” action=“list.html” id=“form1”>
<div>
</div>

    &lt;div style="margin: 0px auto; height: 500px; width: 500px;"&gt;              
        &lt;div id="wrapper" style="width:217px; margin:0; padding:0px; border:0;"&gt;                
            &lt;!-- left --&gt;
            &lt;div id="dleft"&gt;Load in IE8 and click on the yellow area under IE7 mode&lt;/div&gt;                
            
            &lt;!-- right --&gt;
            &lt;div id="dright" onclick='javascript:ddl_showhide(this)'&gt;&lt;/div&gt;
            
            &lt;!-- Clear --&gt;
            &lt;div id="dclear"&gt;&lt;/div&gt;
            
            &lt;!-- Bottom --&gt;                    
            &lt;div id="dbottom"&gt;&lt;/div&gt;
        &lt;/div&gt;                                                                              
    &lt;/div&gt;
&lt;/form&gt;

</body>
</html>

2

Fantastic, it works!

Thank :slight_smile:

3

Hi,

IE6 will always expand an element to accommodate the smallest content and in an empty div the content is actually the current font-size so you would need to set that to zero to reduce the size to zero.


#dclear {
    margin:0px;
    padding:0px;
    border:0px;
    height:1&#37;;
    clear:both;
    line-height:0px;
    margin-bottom:0px;
[B]    font-size:0;[/B]
}

This will happen to any element in IE6 that you give a height to that is smaller than the font-size.

4

Your issue seems to be caused by a combination of both “height: 1%” and “line-height: 0px;”. I’m not entirely sure what you’re trying to achieve here, but by making #dclear simply…

#dclear {
	height: 0;
	clear: both;
}

It resolves the problem.

5

Tnx! but not quite. I tested it and the gap is indeed removed in IE7, but is actually – wider – in IE6.

I’m using MS Virtual machines to repro on XP SP3 using IE7/6

I read somewhere that is it advisable to give some small height to a clearing div’s such that IE will render them correctly, so they were just included for hacking purposes, no particular layout motivation.

This is a mock example which I made to demo the problem.