1 reply [Last post]
Last seen: 18 years 32 weeks ago
Joined: 2004-02-21
Posts: 4
Points: 0

Here's the page: http://www.javashack.net/hatj/2yrolds2.html

Now, the black border around the center content area is inconsistent on IE only. On the other 3 browsers, it shows properly.

When viewed on IE, the border (of the content area) has breaks in it as soon as you try to scroll up and down the page. Also, as I add more divs in the content area (#horsebox), the border changes from being at a margin-left of 190px, to having a margin-left of 0px. The content stays where it is supposed to be.

I can't really figure out why, but I'm sure it has something to do with my use of the .clearfix. I'm still tinkering with it to try to figure it out, but I'd appreciate any help along!


Hugo's picture
Last seen: 7 years 38 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

.clearfix, IE display problem

Hi there,
one of the benefits of the 'clearfix' is that it doesn't require any extra markup and can be used as a class on the div requiring clearing so you could loose the divs holding the clearingfix at present also nested floats will clear themselves so there is no need for the fix on them.
The border problem can be sorted by using position:relative on the #content but as to the main float problem I think that this probably has no solution ( at least not one I could find) and is just the buggy inherit way IE handles floats which are not straight forward at the best of times.
My suggestion in this instance would be to change the #navcol to position absolute with maybe a left:10px and to position the #container relative to have the #navcol position from the container rather than the body.

Hope that's of some help.


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