Hi there,

I have just started to play around with CSS after a long time away. I am doing a quick site for someone using tables (yes I know they are not the best, but I tought myself using them 10 years ago and have just come back to web design after all that time and need this site to be sorted over the weekend!)

I have created the following code. I have used two CSS rules as I was having trouble getting it to display the image with one rule for both.

.righthandmenu {
display: block;
width: 175px;
height: 30px;
padding-left:25px;
padding-top:8px;
background-image:url(menubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;

}
.righthandmenu a:hover {
display: block;
width: 175px;
height: 30px;
background-image: url(omenubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;
}

.menutext a:active, a:link, a:visited{
font-family: Arial;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: none;
}

.menutext a:hover{
text-decoration: underline;
}

At the monet the hover image moves position and I have no idea how to stop it?

Please be gentle with me as I am only trying to help a friend out and havent used CSS before.

Any help would be gratefully appreciated.

Thanks

It is caused by the padding in .righthandmenu.
A good way to fix this is to just ad the text properties of .menutext and .menutext a:hover to the .righthandmenu and the righthandmenu a:hover. then get rid of the .menutext class all together. And you can keep the padding.

.righthandmenu {
display: block;
width: 175px;
height: 30px;
padding-left:25px;
padding-top:8px;
background-image:url(menubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;
font-family: Arial;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: none;
}
.righthandmenu a:hover {
display: block;
width: 175px;
height: 30px;
background-image: url(omenubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;
text-decoration: underline;
}

Hi,
Thanks for your help and reply. I have made this change but now the background does not change at all?

Any ideas?

Thanks

Sorry... My fault I forgot the a in righthandmenu:
.righthandmenu a {
display: block;
width: 175px;
height: 30px;
padding-left:25px;
padding-top:8px;
background-image:url(menubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;
font-family: Arial;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: none;
}
.righthandmenu a:hover {
display: block;
width: 175px;
height: 30px;
background-image: url(omenubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;
text-decoration: underline;
}

But since you are applying this class to the link itself.. you might be better off writing it this way:

a.righthandmenu {
display: block;
width: 175px;
height: 30px;
padding-left:25px;
padding-top:8px;
background-image:url(menubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;
font-family: Arial;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: none;
}
a.righthandmenu:hover {
display: block;
width: 175px;
height: 30px;
background-image: url(omenubkgd.png);
background-repeat: no-repeat;
background-color: #f6f6f6;
text-decoration: underline;
}

Try that and see if it fixes the problem.

Fantastic!
Thank you very much - im learning more and more on css as the day goes on and love it!

Thanks again.

Cheers