Float looks cleaner and easier.I've tried it and it works.Are there any cross browser compatibility issues?Thanks a lot for your help.

May I ask why this step is necessary, surely the image is inside the <li> whether I user my original code or either of your methods, it shouldn't make a difference.

RyanReese
—
2010-02-25T19:44:58Z —
#4

With the current code there are no bugs, but you are treading on thin ice :). The <li> needs to be block level (aka floating does that) to contain the image.

I don't make the rules :p.

PaulOB
—
2010-02-26T16:02:15Z —
#5

May I ask why this step is necessary, surely the image is inside the <li>

It was inside the list until you made the list display:inline

[Inline elements should only paint their "content area" and although the image (which is a r[URL="http://reference.sitepoint.com/css/replacedelements"]eplaced element](http://meyerweb.com/eric/css/inline-format.html)) pushes the line-height higher it does not change the content area of the list element.

IE6 and 7 would however have put the border around the image (with position:relative added) but that would not be correct behaviour.

The inline box model is perhaps one of the most complicated aspects of css.