css sprites - firefox problem

[oslofish]

Greetings,

I am in the process of designing a new company site (my first pure css layout, btw :thumbsup: ) but have ran into a css problem.

I am using sprites for 3 column headlines, trying to hide the actual link text. All looks good in IE 6 / Opera, but in Firefox however, a thin blue line goes across the page (see attatched picture).

What is causing this?

Here is the code...


/*sprites*/

.mhead1 a.feats, .mhead2 a.tools, .mhead3 a.industries {
display: block;
padding: 8px 0 0 30px;
height:100px;
voice-family: "\"}\"";
voice-family:inherit;
height:92px;
text-indent:-9999px;
}

.mhead1 a.feats {
background: url(../img/sprites/mhead1-master.jpg) no-repeat;
}

.mhead2 a.tools {
background: url(../img/sprites/mhead2-master.jpg) no-repeat;
}

.mhead3 a.industries {
background: url(../img/sprites/mhead3-master.jpg) no-repeat;
}

html>body .mhead2 a.tools, html>body .mhead1 a.feats, html>body .mhead3 a.industries {
height:92px;
}

.mhead1 a.feats:hover, .mhead2 a.tools:hover, .mhead3 a.industries:hover {
background-position: 0 -100px;
}

.mhead1 ul, .mhead2 ul, .mhead3 ul {
margin:0;
padding:0;
}

.mhead1 li, .mhead2 li, .mhead3 li {
text-align:center;
margin: 18px 0 0 0;
list-style-type: none;
width: 224px;
}



Help is much appreciated, thanks!

Oslofish

[evilregis]

Can you post a link to the page?

Barring that, have you tried adding:

a {
text-decoration: none;
}

to see if that is what is causing the line?

[oslofish]

adding text-decoration: none; did it!

Thanks so much :D

[evilregis]

Anytime! Glad it worked for you.