image/text links in ul

works as text - not as images

[gulliver]

Another day, another problem...

I have a div 'footer', within which I have a ul 'footernav'.

The ul contains two items, both links - one to the left, the other to the right, each slightly inset.

Works fine with text links. Not so when I use an image - in Safari and Moz the space between the links is treated as the left link.

HTML

<div id="footer">
<ul id="footernav">
<li id="right"><a href="#top">top</a></li>
<li><a href="/">home</a></li>
</ul>
</div>

CSS

div#footer
{
clear: both;
border-top: 8px solid #ccc;
margin: 0;
padding: 5px 10px 5px 10px;
background: #999;
text-align: left;
}

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

ul#footernav li
{
display: inline;
padding: 0;
margin: 0;
}

ul#footernav #right
{
float: right;
font-size: 11px;
line-height: 11px;
color: #fff;
font-weight: bold;
text-decoration: none;
}

ul#footernav li :link, ul#footernav li :visited
{
font-size: 11px;
line-height: 11px;
color: #fff;
font-weight: bold;
text-decoration: none;
}

ul#footernav li :hover
{
color: #000;
}

ul#footernav li :active
{
color: #c00;
}

#footernav img
{
display: block;
padding: 0;
border: 0;
margin: 0;
}

[Smad]

Do you need to declare the width of your link? sounds like it assumes it can use all the space free

[gulliver]

Thanks..

I'd tried this width dec...

ul#footernav li :link, ul#footernav li :visited
{
font-size: 11px;
line-height: 11px;
color: #fff;
font-weight: bold;
text-decoration: none;
width: 100px;
}

And it made no difference.

[Smad]

make img inline? sorry not got moz to test..kinda guessing here :P

[gulliver]

Damn good guess.

Thanks.

Now I'm tryng to recall why I had block.