Frank Schaap wrote:
> I'm slowly going crazy over a problem that keeps bugging me in my production
> pages, but that I can't reproduce in a pared down example.
My advice in regards to IE, is to go crazy fast,
and get it over with. Worked for me. ;)
> The pages are based on the ALA 2col and Mark Newhouse's 2col NN4 layout.
> CSS is included in these test pages:
> On this (production) page IE wrongly propagates the 10% left margin of the
> containing Content div to the left floated elements (pictures and text)
> inside it.
> If I change the margins of the Content div to either ems or px, the problem
> goes away, as shown in this page:
Frank, I don't have IE6, but IE5.5/win does not show the bug,
so it looks like another typical IE6 headache.
You have a left floated div, and it contains a static div with
a 10% left margin, and in that are left floats, that I guess
are 10% too far right, right?
IMO this sort of thing is a good bet to be buggy in IE.
Perhaps someone with IE6 can discover the reason your
simple test does not have the bug. I can however,
suggest you try altering the arrangement by removing the
left margin on #content, and apply a similar left padding on
If you do, and the bug is fixed, the header text may not
be far enough to the left to suit you. In that case,
the header might be kept outside #content, or perhaps
be given a negative left margin to pull it over.
> Of course I was thinking this had to do with the IE float model problem, but
> if it _does_ I can't make head or tails why or how in this particular
> instance. The only thing with a width defined is #main, and making any of the
> other divs position: relative doesn't change a thing.
You're right, it doesn't sound like the float model problem,
but IE is known to have a 'missing' left margin bug. This
ain't it, but it might be a relative. (no pun intended)
I noticed that this layout breaks badly in Nav4, so you can't
be too concerned with that browser. If so, it might be simpler
to (ahem) simplify the layout, by ommiting #content entirely,
and just use a padding on #main, or even just a left margin
Let us know what you come up with, okay?
| Perennial student + Impractical joker + CSS junkie = Big John |
| XXXX <http://users.rraz.net/mc_on_the_rocks/testpage/pie.html> XXXX |
| XXXXXXXXXXXXX <http://users.rraz.net/mc_on_the_rocks/> XXXXXXXXXXXX |
Do you Yahoo!?
Yahoo! Shopping - Send Flowers for Valentine's Day