CSS Forum

**Caistar** · 03-12-2008, 08:41 PM

Hi all, I have an interesting issue with IE8.

I am having the following problem; my 'pageholder' div keeps collapsing up to my top navigation... but only in IE8 - IE7and Firefox work OK.

The following is the code being used:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    font-family: "Trebuchet MS";
    font-size: 80%;
    color: #000000;
    text-decoration: none;
    margin: 0px;
}
#pageholder {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #CCCCCC;
    height: 1%;
}
#banner {
    width: 898px;
    height: 200px;
    border: 1px solid #000000;
}
#topnav {
    width: 898px;
    height: 30px;
    border: 1px solid #000000;
}
#leftcol {
    width: 600px;
    height: auto;
    float: left;
    border: 1px solid #000000;
}
#rightcol {
    width: 200px;
    height: auto;
    float: right;
    border: 1px solid #000000;
}
.clear {
    display: block;
    clear: both;
}
</style>
</head>

<body>

<div id="pageholder">

<div id="banner"></div>
<div id="topnav"></div>

<div id="leftcol">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>

<div id="rightcol">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>

<br class="clear" />

</div>

</body>
</html>

As you can see from the below image, the pageholder is not recognising either of the floated divs. I cannot apply a set height to these divs as the content varies throughout the site.

Any help/advice would be appreciated :-)

**blue-dreamer** · 03-12-2008, 09:57 PM

As IE8 is still in development it's likely to still be buggy so my advice is not to develop for it until it's offcially released.

Saying that, you might want to report your findings to the developers...

**Arenlor** · 03-13-2008, 01:00 AM

Have you tested out the META compatibility modes to see if it's IE8 itself or just the new IE8 engine?

**LadynRed** · 03-13-2008, 03:48 PM

MS has GIVEN UP on that horrid idea of 'meta compatibility'. They announced last week that IE8 will operate by default in STANDARDS MODE.

As for your collapsing problem - get rid of the height:1%. Since IE8 should be working in standards mode, that little hack should NOT be there - and won't work.

**Arenlor** · 03-13-2008, 04:06 PM

*Does a dance of joy*

**Caistar** · 03-13-2008, 07:10 PM

Thanks for the responses people.

I've tried both modes within IE8 - this only falls over in IE8 'mode'... arghh!

About the height: 1% - that was left from my many attempts to find a hack around this, it's not supposed to be there

I guess I'll just wait and see what happens.

**LadynRed** · 03-13-2008, 09:38 PM

It was a clearing problem with your floats. I brought it into Firefox, same behavior as your problem with IE8. Here's how you fix it:

Quote:

<div id="rightcol">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>
<br class="clear" />
</div>
<br class="clear" /> -- add this clearing element
</body>

Pageholder will now 'wrap' both columns.

**benracer** · 03-31-2008, 10:28 PM

Hi,
I am also having this problem and clearing the floats does not work, are there any other suggestions at present. Mant thanks, Ben.

**LadynRed** · 04-01-2008, 03:21 PM

Nothing that some education can't fix:
http://css-discuss.incutio.com/?page=ClearingSpace

http://css-discuss.incutio.com/?page=FloatedBlock

**njwood60** · 08-16-2008, 04:04 AM

Hi all

I had this exact same problem. Everything works fine except in ie 8.
I was using

Code:

 css:

.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

html:

    <br class="clearfloat" />

to clear my divs.

When I changed it to:

Code:

 css:

.clearer {
    clear:both;
}

html:

  <div class="clearer"></div>

it now works in ie8 (and seems to be OK in other browsers as well)

Having read the discussion at:
http://css-discuss.incutio.com/?page=ClearingSpace

as suggested by LadynRed, I see that using a <div> to clear rather than <br> can cause problems in ie5.5 and ie6. Thankfully no problems on my page.

**inventpartners** · 06:38 PM

IE8 is collapsing the margins of the float sibling element into the parent element. Whether this is correct or not is open for debate. Gecko and Safari certainly disagree.

I've just discovered this one myself, so I wrote about it here:
http://www.inventpartners.com/conten...margin_top_bug