Css background image swap problem

[tonyrolfe]

Hi there,

This is my first post so sorry if I do not follow any correct protocol.

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?

The URL is located at:

www.cubeconcepts.com/cssissue/test.html

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

Tony

[CSS_Kidd]

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;
}

[tonyrolfe]

Hi,

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

I have reloaded the new page up again at www.cubeconcepts.com/cssissue/test.html

Any ideas?

Thanks

Tony

[CSS_Kidd]

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 doesn't fix the problem.

Again I am sorry for not catching that.

[tonyrolfe]

Fantastic!

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

Thanks again - have a great weekend

Cheers

Tony