Comments on: IE Lists and Floats

Question: IE Lists and Floats

Grod — Thu, 21 Oct 2004 18:50:51 -0800

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?

By: BobInce

BobInce — Thu, 21 Oct 2004 19:27:52 -0800

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.

By: smackfu

smackfu — Thu, 21 Oct 2004 19:35:19 -0800

I don't get why the paper title (The Superior Paper) is in the same list item as the grade un-ordered list.

By: Grod

Grod — Thu, 21 Oct 2004 20:36:07 -0800

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.

By: BobInce

BobInce — Thu, 21 Oct 2004 23:57:08 -0800

> would you mind showing me what you mean?

Erm... in which bit?

By: Grod

Grod — Fri, 22 Oct 2004 10:23:55 -0800

um, the bit that makes IE display the lists the way firefox displays them

By: BobInce

BobInce — Fri, 22 Oct 2004 17:43:24 -0800

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.

By: Grod

Grod — Fri, 22 Oct 2004 18:44:33 -0800

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.