12 replies [Last post]
seanami
seanami's picture
Offline
Regular
Boston, MA / Billings, MT
Last seen: 17 years 27 weeks ago
Boston, MA / Billings, MT
Joined: 2004-12-31
Posts: 11
Points: 0

Hi,

Working on a site at http://seanmcb.com/?area=blog. In Firefox, this page looks fine (of course) but in IE all the content in the main area clears down below the floated menu to the right. However, I did NOT tell it to do this and I can't figure out why it is doing this...

Any help would be greatly appreciated. The div with the menu is floated right and the the div with the content has a margin which keeps the content away from the floated menu (over to the left.) The div which is clearing against my will in IE has nothing special about it really...

Any help or ideas would be greatly appreciated.

And in conclusion, I hate IE.

-Sean

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

seanami
seanami's picture
Offline
Regular
Boston, MA / Billings, MT
Last seen: 17 years 27 weeks ago
Boston, MA / Billings, MT
Joined: 2004-12-31
Posts: 11
Points: 0

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

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...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

seanami
seanami's picture
Offline
Regular
Boston, MA / Billings, MT
Last seen: 17 years 27 weeks ago
Boston, MA / Billings, MT
Joined: 2004-12-31
Posts: 11
Points: 0

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

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. Tongue

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

seanami
seanami's picture
Offline
Regular
Boston, MA / Billings, MT
Last seen: 17 years 27 weeks ago
Boston, MA / Billings, MT
Joined: 2004-12-31
Posts: 11
Points: 0

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

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

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

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

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

seanami
seanami's picture
Offline
Regular
Boston, MA / Billings, MT
Last seen: 17 years 27 weeks ago
Boston, MA / Billings, MT
Joined: 2004-12-31
Posts: 11
Points: 0

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

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...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

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

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

Hugo wrote:
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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

seanami
seanami's picture
Offline
Regular
Boston, MA / Billings, MT
Last seen: 17 years 27 weeks ago
Boston, MA / Billings, MT
Joined: 2004-12-31
Posts: 11
Points: 0

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

Hey,

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