Horizontal LI CSS and FireFox

rendering, on a second attempt

[blend27]

I have a simple inline LI CSS in external file

#related_items li
{
list-style-type: none;
display: inline;
padding-right: 5px;
}

and the html on the page:

<ul id="related_items">
<li><a href="page1.htm"><img border="0" src="1.jpg"></a></li>
<li><a href="page2.htm"><img border="0" src="2.jpg"></a></li>
<li><a href="page3.htm"><img border="0" src="3.jpg"></a></li>
<li><a href="page4.htm"><img border="0" src="4.jpg"></a></li></ul>

Works in IE, also works in Firefox, but, in Firefox I have to refresh the page for it to display inline.

Is there a secret to this?

[londrum]

my best guess would be to try and put some widths on the images, something like this

<img border="0" src="1.jpg" width="50">

on the first pass the browser is trying to lay out the page, but it doesn't know how wide the images are until it downloads them, so it might be stretching out the block as wide as it can be to accommodate whatever possibility.

on the second pass (when you refresh it), it does know how wide they are, so it can lay it out properly.

[blend27]

Thank YOU londrum, that did it perfectly.

Blend27