Help with floating boxes in Internet Explorer

Hi, I have some pictures that I need to float next to each other. I can't change the html as it's a database CMS but can alter the CSS. The pictures look fine in Firefox (pictures next to each other in a row) but in I.E the pictures get pushed down as the row of pictures goes on.

This is my html:

<div class="content"><div class="item-list"><ul><li>friends<div class="item-list"><ul><li><div class="picture"><a href="/people/test/6"><img src="images/default-avatar.gif"  /></a></div></li><li><div class="picture"><a href="/people/tee/4"><img src="picture-4.gif" /></a></div></li></ul></div></li></ul></div></div>

</div>

HTML:

and my CSS:

#user-profile #profile-relationships ul {
	list-style:none;
	padding:0;
	margin:0;
}

#user-profile #profile-relationships ul li {
	list-style:none;
	padding:0;
	margin:0;
}

#user-profile #profile-relationships .item-list .picture img {
	width:30px;
	float:left;
}

Code (markup):

If anyone can point out how to fix this I'd greatly appreciate it.

Thanks

 

That is some ugly html.

Float the <li> instead of the image.

cheers,

gary

 

or set the li to display:inline - just add that and the 'staircase' effect should dissapear.

oh, and since you have list-style:none on the ul, you don't need to say it on the li.

 

^ I would. I've already seen two pages where someone has list-style: none on a ul and IE ignored it, as if having that on the ul wasn't good enough for it or something. Esp if there are other, earlier menus with list-style images. Dunno why. One of my "resets" is
ul, li {
list-style: none;
}
to stop IE from maybe some day out of the blue being a bitch.

 

Only a problem in quirks mode... and then only in IE 6. (5.x doesn't do this) - I know, I've seen it too.

 

Thanks for all your help. It sure is some ugly html, but it's a CMS that's hard to change (although I've been trying for days!). I'll give your suggestions a go, thanks.