Div clears when I don't want it to in IE?

IE/Win wrongly expands a container element to enclose its contents, including float elements. It's in violation of W3 recommendations, there's no known cure, it's the 800lb gorilla, so there you are.

cheers,

gary

That's strange, because I have gotten it to work before. This page: http://seanmcb.com/?area=blog&entry=1 exhibits a div in the content area which does not clear below the floated sidemenu in IE. I'm not sure why this is, but it may be because I'm using the height:1% hack on it (for other reasons.)

Hmmm...

seanami,
It appears to be your .nav table { width:100%;} that is causing you the problems in this instance.

I would also have another look at your use of the clearfix solution as I'm not sure it's required and not sure what your trying to clear. The use of the same name for both a class and a id can be confusing.

Hugo.

Hey, thanks Hugo. That fixes the problem. I was under the impression that the IE width:100% error applied only to divs. I guess not. And yes, sorry about the messy CSS code. I'll be cleaning it up and consolidating once I get everything working properly.

Oh yeah, I'm using clearfix because I sometimes float images to the left side within the posts, and I want the image to stay within the post box.

There is one other IE problem with the site that irks me. On this page (http://seanmcb.com/?area=blog&entry=2) everything looks peachy in firefox, but in IE, the div with the post body appears to stop about three pixels early on the right side. I believe that this is related to the 3 pixel float error in IE, but I'm not sure how to remedy it.

I'm not sure it's the 3px bug, if your referring to the white dotted lines on the .comments .comment div not touching the sides then that is the 5px padding that you have on the .comments div ( .comment parent div)

But I may have missed what you meant.

Hugo.

No, it's not the dotted white lines. It's the gap by the content area.

This little gap shows up just for this one div and only when it is to the left of the floated side menu. As you can see, the divs above and below it are unaffected. The div that's affected is the only one that I'm using the clearfix hack on...

The page is at http://seanmcb.com/?area=blog&entry=2.

Sorry my error :roll:
Have you read through this link on the 3px jog?

http://www.positioniseverything.net/explorer/threepxtest.html

Hugo.

Yes, I have read through that article, but I'm confused about what element to apply the height:1% hack to. I've tried applying it to the element that contains the light grey div, but that didn't work...

It looks as though you will need height:1% hack on the .outerbox div
I'd just feed it with a star selector.

Hugo.

I think IE/Mac honors height, i.e. it doesn't expand to enwrap its content as IE/Win does. Using the Holly hack without hiding it from IE/Mac could cause problems.

/* hide from IE-mac \*/
* html .outerbox {height: 1%;}
/* coming out now */

cheers,

gary

Yes Gary your correct, in my haste I took the use of the "hide from Mac" filter as implicit as it is generally used as the second half of the "Clearfix" solution and especially as seanami had already employed it elsewhere on the page.

Hugo.

Hey,

Thanks you guys. That works beautifully. Thanks a lot.