Extra height in IE6

[ryanh_106]

Hi,

 

I have a header div that contains two images that are both 102px high and a background (repeated along y) that is 102px high with a border along the bottom of 5px. For some reason, if I set the height to auto (or dont specify it) then there is a 5px gap (in which the background colour of the div shows through) between the bottom of the images and the border. If I set the height specifically to 102px then the problem is rectified in IE6 and FF but remains in IE6. I also tried to place the border on a wrapper div (as shown below) but this did not help, there still seems to be something pushing the header down. Any advice as to why this is happening is apprecaited.

 

Cheers

 

HTML:

<div id="headerborder">
    <div id="header">
        <img src="templates/controlpanel/images/logo.gif" title="This is our logo" id="logo" />
        <img src="templates/controlpanel/images/rightimage.gif" id="cds" />
    </div><!--END HEADER-->
</div><!--END HEADERBORDER-->

 

CSS:

 

#header { background-color:#ff0000; 
        background-image:url('images/headerbg.gif'); 
        background-position:top; 
        background-repeat:repeat-x; display:block;
        margin:0px; padding:0px; 
        width:100%; height:102px; text-align:right; }
#headerborder { width:890px;
        border-bottom:5px solid #346391; }

 

 

[dbrimlow]

Without knowing in what context this div is placed (your full css and html) it is impossible to help.

 

All elements positioned with css impact each other.

[ryanh_106]

Ok ill try rack up a full example (cant just dump the actual code as its work related )

 

I thought there was some known issue with IE6 and borders being included with heights, guess i was hoping it would be a simple answer!

 

Ill put something together and get back to you.

 

Cheers

[dbrimlow]

There are known issues - "double margin bug", "Box model bug", "HasLayout", "peek-a-boo bug" and many more, LOL, which is why we need to see the context to determine which of them are being triggered.

[bronzemonkey]

It's not the double margin bug. That is only triggered when an element is floated and has margin on the same side as the side it is floated towards. It is easily fixed by adding {display:inline;} to the IE6/5 stylesheet.

 

To fix this problem you just need to use:

 

#header img {display:block;}

 

to display the images as block items and remove that space that appears below them.

[dbrimlow]

It's not the double margin bug. That is only triggered when an element is floated and has margin on the same side as the side it is floated towards.

 

Exactly why I want to see what else he has. Does he have floated elements before or after his header element (like a left side nav box AND a right side content box floated left with no container or clearing).

 

Or absolutely positioned elements with block level header tags (I've had instances where IE includes the default header tags to the html flow as if it had been positioned relative instead).

 

I've had occasion where just specifying text-align:right will cause IE to auto tack on a default right margin, and if he didn't specify img {border:none(or 0)} it will add a right margin.

 

All of the bugs are "easily fixed", knowing which is being triggered is the key, though.