CSS list and positioning

[gulliver]

Trying (unsuccessfully so far) to reliably cross-browser achieve this...

Footer contains two images. With links.
One on the left links to 'home'. The one on the right links to the page-top anchor.
Set as list - with additional inline style.

Safari bungles it.

Suggestions appeciated. please and thanks.

here's my (simplified) code:

<pre>
CSS

#footer
{
clear: both;
border: 0;
border-bottom: 0;
border-top: 8px solid #ccc;
padding: 0px;
height: 25px;
background: #999;
}

#footernav ul
{
list-style: none;
display: inline;
padding: 0;
margin: 0;
border: 0;
}

#footernav li
{
padding: 0;
margin: 0;
border: 0;
}

HTML

<div id="footer">
<div id="footernav"
<ul>
<li><a href="#top"><img src="top.gif" width="15" height="15" alt="top" style="float: right;" /></a></li>
<li><a href="/"><img src="home.gif" width="15" height="15" alt="home" style="float: left;" /></a></li>
</ul>
</div></div>
</pre>

[Span]

Hi,
I think it's the list-item that should have the display:inline; instead of the list itself.

[gulliver]

>I think it's the list-item that should have the display:inline; instead of the list itself.

I thought that might be it - then checked at ALA and apparently not.

A response from another forum identifies the source - an unclosed tag

<div id="footernav"

And specifically setting a text-align: left; helps too - seems it doesn't inherit properly.

Ah - the joys of CSS.

Thanks again. Appeciated.

[gulliver]

Adding to my own posts again...

I was wrong... you're right.

After clearing my cache and temporarily using in-line css... the problem varies depending whether css is imported or on page.

For Safari to behave... with on page css, display:inline; and list-style: none; can be applied to ul. With imported css it must also be applied to li.

My so-far solution is, with imported css, to apply display:inline; and list-style: none; to ul and li. This seems to be reliable in the browsers I've tested so far.

Thanks again. Appeciated.