How to place image inline adjacent to list?

[matturn]

I have a horizontal UL that I would like to place an img before. I would like them to display adjacent to each other in a friendly inline way. But they will not.

<img src="http://www.google.com.au/intl/en_au/images/logo.gif"/>
<span id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
</ul>
</span>

Styled with

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
position:absolute;
}
#navcontainer ul li {display: inline;}

demonstrates the issue.

Is there any CSS that might be used to make this HTML work?

One potential fix is to make the image the first list item, and style it to make it fit in. But I cannot get this to work in IE5.

[marcel]

Something like this?

<img src="http://www.google.com.au/intl/en_au/images/logo.gif"/>
<ul id="navcontainer">
<li><a href="#">Milk</a></li>
</ul>

#navcontainer
{
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li {display: inline;}

img {float: left;}

[matturn]

Yes! Thank you.

I'm embarrased I didn't think of that elegant solution...

[Xapti]

As far as I know (a guess), the reason why your example didn't work is because you didn't set the ul to inline as well.