Faking a Graphical Link
Then you need to work on your CSS. You need to change the display of your anchor tags to block for this trick to work in Mozilla. Otherwise I think the CSS is pretty straight forward:
a.menu{
color:#ffffff;
font-family:verdana;
font-size:11px;
font-weight:bold;
text-decoration:none;
line-height: 30px;
width:120px;
height:30px;
position:absolute;
background-image: url("up.jpg");
background-repeat: no-repeat;
text-align: center;
display: block;
}
a.menu:hover {
color:#000000;
background-image: url("down.jpg");
}
Nothing too complicated there. You need to set the width and height to the dimensions of the image you are using as a background.
You can view (in an iframe) a working example below:
Site Categories
Recent Blog Posts
