looking for help on rollover/live text prob

[drnen101]

Hey all I'm trying to get some help- still kinda new to this CSS stuff.
Here is the problem- live text over rollover image with both areas being clickable and both areas activating the rollover. I've scoured the internet and found something that works great on safari but not in IE or Firefox. So help would be oh so very appreciated:

CSS

.coins {
display: block;
width: 123px;
height: 26px;
background: url(images/homepage17_39.jpg) no-repeat;
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.coins:link {
display: block;
background: url(images/homepage17_39.jpg) no-repeat;
text-decoration: none;
font-weight: normal;
padding-top:5px;
padding-left:8px;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.coins:hover {
color: #3366FF;
background: url(images/homepage17_39_chng.jpg) no-repeat;
}


//HTML

<span class="coins"><a href="#" class="coins">Coins</a></span>

The problem is in positioning the text over the rollover image. It shows up exactly as i want it (5px down, 8 from left) in safari but in IE and Firefox it sticks to the top border of the image. I'm sure I'm just not defining my classes correctly. Thanks so much in advance for any help

[rdoyle720]

Hmm. I'd recommend something more like:

.coins {
display: block;
width: 123px;
height: 26px;
background: url(images/homepage17_39.jpg) no-repeat;
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.coins SPAN {
display: block;
font-weight: normal;
padding-top:5px;
padding-left:8px;
}

.coins:hover {
color: #3366FF;
background-image: url(images/homepage17_39_chng.jpg);
}
With HTML:

<a href="#" class="coins"><span>Coins</span></a>