IE7 CSS bug aligning <img> with text in a <ul>

Question

I've been banging my ahead on this IE7 bug for the last few days and it's time to resort to the mind of the crowd.

I have the following HTML and CSS: http://beerpla.net/for_www/ie7_test/test.html

The goal is to have a <ul>, with each <li> containing a small icon and some text. Multiline text would be aligned to itself and not wrap under the image.

I've tried using float:left on the image and a bunch of other things, and finally I thought the position:absolute would work for sure but in IE7 I consistently see the text pop off to the next line and get misaligned with the image:

This is what I expect it to look like:

I even tried to make the div display:inline which kind of worked but then started wrapping under the image for long lines, so it was no good. zoom:1 also produced a similar effect.

I'm at a loss at the moment. This code works fine in all other browsers. IE7 is a special, very special child.

Any ideas?

Thank you.

Edit: If you have IE8, you can emulate IE7 by pressing F12 and then Alt-7.

Answer 1

Try using padding on the li instead of margin on the div. If display:inline worked, it's probably IE choking on working out the div's box model in some arcane way: padding on the li and maybe display:inline on the div may iron it out.

Answer 2

Moving the <img> tag into the <div> fixes the issue. Still unknown to me why IE7 does what it does.

Answer 3

instead of putting the image as an element, try using background property. like so

ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }

note: you might have to adjust the padding to suit the distance you want to maintain between the image and text.

Answer 4

Go back to floating your image left, and then add overflow: hidden; to the div. The text will no longer wrap below the image, and there are no side-effects unless you are trying to position content from inside the div out (don't see that here). Completely compatible cross-browser. With IE6 you simply need to add hasLayout by any means to get the same effect.