rollover Options

[Smarmosaur]

i've been redesigning my site for a while and stuff. so i have this tab towards the top of my page that i want a simple rollover.
first, so you know what i'm talking about, link: http://rockitstudios.890m.com/v3/index2.html

the problem is that the rollover image is always showing because the original normal tab image is transparent. the background behind it also always changes, so i can't add a solid background to the normal image. how can i make the rollover image appear ONLY when it is hovered?

[Mikeplyts]

Are you using the code like this?

CODE

<style>
.CLASS_NAME {display:block; width:###px; height:###px;
background-image:url("IMAGE_URL_BEFORE_ROLLOVER"); background-repeat:no-repeat;}
.CLASS_NAME:hover {display:block; width:###px; height:###px;  background-image:url("IMAGE_URL_AFTER_ROLLOVER"); background-repeat:no-repeat;}
</style>

If so, try using the other rollover code like this:

CODE

<style>
.CLASS_NAME {display:block; width:###px; height:###px; background-image: url("IMAGE_URL_BEFORE_ROLLOVER"); background-repeat:no-repeat; background-position:top left;}
.CLASS_NAME:hover {display:block; width:###px; height:###px; background-image: url("IMAGE_URL_AFTER_ROLLOVER"); background-repeat:no-repeat; background-position:bottom left;}
</style>

(Just make sure that the height is doubled.)