Hello,
I'm doing a project for school making a website about short term memory loss. It's all going fine and dandy, until firefox 3.0 desided to trouble me just slightly.
In my navigation I have created a menu with mouseover effect using this css code:
Code:
a.home {
display:block;
width:66px;
height:45px;
background:url(images/nav/1_02.jpg);
text-decoration:none; /* erases an underline that some browsers create */
}
a:hover.home {
display:block;
width:66px;
height:45px;
background:url(images/nav/2_02.jpg);
text-decoration:none; /* erases an underline that some browsers create */
}
a:active.home {
display:block;
width:66px;
height:45px;
background:url(images/nav/3_02.jpg);
text-decoration:none; /* erases an underline that some browsers create */
}
This works just fine in both IE and Firefox alongside this HTML:
Code:
<div id="menu">
<ul>
<li><a class="home" href="#"><span>Hjem</span></a></li>
</ul>
</div> <!-- ends menu -->
I also have used the code to not display span, so that the background images are displayed without the text on top. However, I would much prefer to use just a simple non-breaking space tag rather than span and not displaying it. The issue is that when I use the non-breaking space code in Firefox it displays a very small white line ontop of the background images. This only happens with the first background image, not the ones that are displayed for hover and active.
Does anyone know a way to resolve this? I have tried defining the text colour and background colour in the menu div to the same colour of the buttoms, but that does not help.
Thanks in advance for any help, it is much appriciated.
Kindest,
Petter.
Before you post, read our: 
