This red bordered div (#wrapper) should be 480px wide. The black arrow above indicates the true right 'content edge' of #wrapper. The unordered list below contains seven list items given 'display: inline' and 'white-space: nowrap', making them a non-wrappable line.
See that textless line of 'ghost' list items above the 'true' list item line? That is where the line should (and does) appear in Mozilla and Opera. But IE does not like to let nested elements protrude beyond their containers, even when those containers are given specified rigid dimensions. In IE the right edge of #wrapper is pushed over to accomodate that rigid line of list items, violating the W3C standard. (see 'overflow:visible')
I could replace the list items by 'nowrap' spans, or even just one span, and the bug would still appear.
If #wrapper were not 'extended' in this manner, all browsers but IE5/win would match. However, when it is extended, and a float is involved, it seems to induce the bug you see here. The line is dropped down below the float, leaving those 'ghost' backgrounds behind. A truly bizarre bug.
Notes: IE5/win does not have the bug because it does not recognize 'white-space' as a valid property, thus the container is not 'extended', and the bug is not triggered. IE6/win doesn't show the phantom boxes, but still drops the line below the float.
Either a left or a right float will trigger the bug.
Opera 7.1 is strangely displaying as IE6 does, but without extending the container. Maybe that's next on the agenda. Opera has recently exibited a flirtation with 'Explorer love' as documented in this page.
Look close and you'll see that it is NOT the 'ghost' line that is extending #wrapper, despite its being longer (due to the presence of the float). Rather it is the 'true' line below the float that controls the right edge of #wrapper. I've made the third <li> longer than the others to illustrate this point.
I do not know what is going on inside IE's rendering engine, but I'll bet it ain't pretty!
Screenshot thanks to Gary Bland, and Fabrice Pascal, of the css-dicuss list.
Kudos to Chris Hester for tipping me off to the Op7.1 non-compliance.
Holly 'n John
email
©positioniseverything
Last updated: May 10, 2003
Created August 31, 2002
