IE Lists and Floats
October 21, 2004 6:50 PM   Subscribe

IE Lists and Floats
I've been playing around with lists and have run up against what I believe is one of IEs box model bugs. Every workaround I know of is useless. I've created a simplified example of what I am doing that contains only what is needed to get the lists to style properly in a standards compliant browser. In the actual layout they are contained in a center column. If you view this in Firefox or Mozilla and then in IE 6 you'll see the problem. Example Can anyone figure out what is going on here?
posted by Grod to Computers & Internet (7 answers total)
It's to do with IE's behaviour of making the parent of any floating element high enough to contain the complete floating element. See for the tedious detail.

Because of this, closing the first <li> takes the position down to the bottom of the floated <ul> that's inside it. Then when the second <ul>-in-<li> comes along we're already below the bottom of the float so the things stack vertically instead of horizontally.

To avoid this problem you could try floating the <li> directly instead of its child <ul>; then there would be no parent element to fool IE into clearing the inner float.

On an unrelated point, I'm not sure why you're floating the outer <ul>s. Setting 'clear' on an element whose ancestor is floating sounds like asking for trouble to me.

Finally, you've got elements that are floated but without a width. In CSS 2.1 this is allowed and means 'shrink-to-fit'; in CSS 2 it explicitly isn't. In any case, different browsers will behave different in the face of this.

You could set a width for the left float and leave the right bit unfloated with a left-margin of the same width. But if what you really want is shrink-to-fit column-like behaviour, you're really probably best off with a table.
posted by BobInce at 7:27 PM on October 21, 2004

I don't get why the paper title (The Superior Paper) is in the same list item as the grade un-ordered list.
posted by smackfu at 7:35 PM on October 21, 2004

Response by poster: Hmmmmmmmmmmmmmmm. BobInce, would you mind showing me what you mean?

smackfu... 'cause it works... not much of an answer, I know. However, since the li contains a sub list I could justify the choice on the grounds that it is the definition of the term, sort of like a sub heading or parenthetical elaboration before the description.
posted by Grod at 8:36 PM on October 21, 2004

> would you mind showing me what you mean?

Erm... in which bit?
posted by BobInce at 11:57 PM on October 21, 2004

Response by poster: um, the bit that makes IE display the lists the way firefox displays them
posted by Grod at 10:23 AM on October 22, 2004

Ah, you mean the 'just give up and use tables' bit? :-)

If you just want a simple fix, move the float:left from the 'li ul' rule to the <li> itself. But be aware that what you're trying to do with shrink-wrap floats is explicitly invalid in CSS 2.0.

If you don't mind having a fixed-size left column, float the first <li> in each body-level <ul> left and give it a width (eg. 12em or something). Then give the second <li> a margin-left of the same amount (but don't float it). And don't float the top-level <ul>s.
posted by BobInce at 5:43 PM on October 22, 2004

Response by poster: BobInce I'm an idiot. I don't mind explicit widths on the elements, but what you are saying isn't working for me so I don't think I'm understanding what you mean. Can you email me a modified copy of example.html?

Sorry, and thanks.
posted by Grod at 6:44 PM on October 22, 2004

« Older Help me find A.Y. Jackson's proposed image for the...   |   What is the best mid-level hotel to stay at in St.... Newer »
This thread is closed to new comments.