Span links firefox outline problem

[wonker]

Hello I've got a problem with my page in firefox.

I've got a menu an above this menu I have an image that changes when I hover over each menu item.

To achieve this I wrapped the image with a span and set the span to a absolute position and to hide it I set it to 1px by 1px over a black line.

When no item is hovered I need to have an image that shows so I have set it as a background image with no repeat with a horizontal and vertical position.

My problem is that in firefox and not IE, when I hover over a link item firefox adds a left and top border to the span. If I set the texte color for the span to the same as the background colour you can not see the border but the image is not in its initial place so does not have exactly the same position as the background image.

to remove this border I have tried a few different methods, I've tried :
border: 0;
padding: 0;
outline: none;

and all without success, how can I remove this border?

Thanks in advance!

[Marshall]

wonker,

Can you post the related CSS and HTML as it would make it easier to study the problem.

Marshall

[wonker]

Ok I'll reduce de code to the minimum... here is the CSS :

#container {
position: relative;
float:left;
background-image: url(images/icon_1.jpg);
background-repeat: no-repeat;
background-position: 15px 0px;
}

#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:-1px;
left:-1px;
overflow:hidden;
}

#container ul {
list-style-type: none;
margin: 163px 0 0 0;
padding: 0px;
float: left;
}

#container a.gallery:hover span {
position:absolute;
width:142px;
height:139px;
top:0px;
left:15px;
}

#container a.gallery, #container a.gallery:visited {
display:block;
height:27px;
width:159px;
color:#BEBFB3;
text-decoration:none;
text-align:left;
background-image: url(images/square.gif);
background-repeat: no-repeat;
padding-left: 30px;
line-height: 27px;
font-size: 90%;
}

And here is the HTML

<div id="container">
<ul>
<li>
<a class="gallery" href="news.php">NEWS
<span><img src="images/icon_2.jpg"/></span>
</a>
</li>
<li>
<a class="gallery" href="aboutus.php">ABOUT US
<span><img src="images/icon_1.jpg"/></span>
</a>
</li>
<li>
<a class="gallery" href="products.php">PRODUCTS
<span><img src="images/icon_4.jpg"/></span>
</a>
</li>
<li>
<a class="gallery" href="contact.php">CONTACT US
<span><img src="images/icon_3.jpg"/></span>
</a>
</li>
</ul>
</div>

With this code I see a black line on the left and on top of the images icon1,2,3 and 4 when I hover over the menu on firefox, it is the highliting for keyboard users I presume, but would like to be able to remove it anyway, my only other solution will be to use javascript instead of CSS which I really do not want to do.

Thanks :)

[Marshall]

wonker,

The only thing I can imagine is that some browsers don't like spaces after the <li>. Try putting everything on one line:

<li><a class="gallery" href="news.php">NEWS<span><img src="images/icon_2.jpg"/></span></a></li> 

Hope this helps,
Marshall

[lavazza]

Firefox does NOT mind spaces in an <li>

Maybe this - or a variation of it - in the CSS might help

img{
border: none;
}