Float problem MSIE6.0 only

[Jonathan N. Little]

While overhauling website to PHP and rid dependency of JavaScript for my
navigation, I decided to update the CSS and some legacy table layouts
on some pages. All seems fine except floated picture boxes fail only in
MSIE6.0, The funny thing is looks fine in MSIE5.5 and 5.0! Here is a
test page to illustrate the problem, the image boxes in 6.0 to not float
left and right but span the whole content div...

http://www.littleworksstudio.com/temp/debug.html

Of course it looks correct in Opera, Moz, FF, Konq... and IE 5.5 5.0.
Cannot seem to find the culprit or is my IE the problem. Dumped cache
and rebooted but problem persists. Put pertinent style on the demo page.

 

[Jonathan N. Little]

While overhauling website to PHP and rid dependency of JavaScript for my
navigation, I decided to update the CSS and some legacy table layouts on
some pages. All seems fine except floated picture boxes fail only in
MSIE6.0, The funny thing is looks fine in MSIE5.5 and 5.0! Here is a
test page to illustrate the problem, the image boxes in 6.0 to not float
left and right but span the whole content div...

http://www.littleworksstudio.com/temp/debug.html

Of course it looks correct in Opera, Moz, FF, Konq... and IE 5.5 5.0.
Cannot seem to find the culprit or is my IE the problem. Dumped cache
and rebooted but problem persists. Put pertinent style on the demo page.

Damn! I found it! Been futzing with this way too long. It was the margin
specification to center the image within the div in case the caption
text pushed the div wider than the image and padding.

.pixbox IMG,
.pixboxL IMG,
.pixboxR IMG {
display: block;
margin-left: auto; <- the problem
margin-right: auto; <- the problem
}

I guess it is not too important if the text push the image off center.

+--------------+
| [IMAGE] |
| Caption text |
+--------------+

Or is there another way that MSIE6 will not balk?

 

[rf]

All seems fine except floated picture boxes fail only in
MSIE6.0,

Floated elements must have a width. In the absense of one IE6 assumes 100%,
FF (for example) assumes the width of the widest thing inside the element
(your picture).

The funny thing is looks fine in MSIE5.5 and 5.0!

No, not funny at all. You are running IE6 in "standard compliant" mode, so
its box model is broken in an entirely different way to IE5.x.

Temporarily take out the doctype, putting IE6 in quirks mode. It will then
behave like IE5.x (well, sort of).

 

[Jonathan N. Little]

Jonathan N. Little wrote:




Floated elements must have a width. In the absense of one IE6 assumes 100%,
FF (for example) assumes the width of the widest thing inside the element
(your picture).

Ah but the same would be true for my drop caps where the div's width is
defined by the width of the containing character + padding, but it does
not expand like the picture boxes in IE6. No, I found the culpit it was
using margins within to center the image if the text pushed the div box
wider.