IE Lists and Floats

October 21, 2004 6:50 PM

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 http://www.positioniseverything.net/easyclearing.html 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