CSS image rollovers

[marmite]

Hi, the below isn't working. I've tried several combinations, ids, classes, "", "a", "a:hover" etc. No joy.

 

The image doesn't even show.

 

Just want these images to replace each other on hover. Thanks for any help...

 

 

CSS code

# .simcards {
background-image: url(../images/bulk_sim_a.gif);
background-repeat: no-repeat;
height:26px;
width:163px;
margin:0px;
padding:0px;
}

# .simcards a{
background-image: url(../images/bulk_sim_a.gif);
background-repeat: no-repeat;
height:26px;
width:163px;
margin:0px;
padding:0px;
}

# .simcards a:hover{
background-image: url(../images/bulk_sim_b.gif);
background-repeat: no-repeat;
height:26px;
width:163px;
margin:0px;
padding:0px;
}

 

Html code

	<td width="163px"><div class="simcards">
		<a href="/index.php" ></a>
	</div></td>

[ToonMariner]

tables eh? euch

 

using that 'markup'

<td width="163px">
<div class="simcards">
  <a href="/index.php" ></a>
</div>
</td>

 

css...

div.simcards a
{
background: transparent url(../images/bulk_sim_a.gif) no-repeat 0 0;
display: block;
height:26px;
width:163px;
margin:0px;
padding:0px;
}

div.simcards a:hover
{
background-image: url(../images/bulk_sim_b.gif);
}

 

You can help prevent the 'flicker' on the first hover (as the browser downloads the hover image for the first time) by having just the one image. put bulk_sim_a.gif and bulk_sim_b.gif into one file (one above the other so that the new image is twice as high - i will assume that would produce and image 52px in height). If you do that then all you need do is shift the back ground poistion like so...

 

div.simcards a
{
background: transparent url(../images/bulk_sim_a.gif) no-repeat 0 0;
display: block;
height:26px;
width:163px;
margin:0px;
padding:0px;
}

div.simcards a:hover
{
background-position: 0 26px;
}

[marmite]

Hey, thanks! This didn't pop up on my "show new replies" for some reason, but I'll try it out tomorrow.

 

Cheers