CSS Rollover displays hover image behind not in front

[Historical Forums User]

Here is the link:
http://terryjennywed.com/testhome.html

The problems with the nav bar are the image appears behind not in front and they appear to the left, not on top of the original image.

The site is at a really rough stage, but I want to get the rollovers working first. I have the rollover CSS in a separate CSS file, here are the contents of the nav CSS sheet:

@charset "utf-8";
#nav ul {
list-style: none;
width: 1024px;
float: right;
height: 130px;
}
#nav li {
float: left;
text-align: center;
padding-right: 40px;
width: 108px;
padding-left: 80px;
}
#nav a {
width: 180px;
display: block;
padding-top: 110px;
text-decoration: none;
color: #CC6600;
height: 100px;
background: #333333 url(../Nav_noskulls.jpg);
}

#homeNav a {
background: url(../Nav/images/off_Home.gif) no-repeat left top;
}
#homeNav:hover {
background: url(../Nav/images/images/on_Home.gif) no-repeat 0 0;
}

#registryNav a {
background: url(../Nav/images/off_registry.gif) no-repeat;
}
#registryNav:hover
{
background: url(../Nav/images/images/on_registry.gif) no-repeat;
}
#hotelNav a {
background: url(../Nav/images/off_hotel.gif) no-repeat;
}
#hotelNav:hover
{
background: url(../Nav/images/images/on_hotel.gif) no-repeat;
}
#contactNav a {
background: url(../Nav/images/off_contact.gif) no-repeat;
padding-right: 0px;
}#contactNav:hover
{
background: url(../Nav/images/images/on_contact.gif) no-repeat;
}
#nav #contactNav {
padding-right: 0;
}

[AshtonSanders]

Hi Abbeynormal,

It sounds like you’re missing some basic principles of what you are actually doing.

You have this code:

Code:

#hotelNav:hover
{
background: url(../Nav/images/images/on_hotel.gif) no-repeat;
}

Please note that the property is background not foreground. This image get’s applied to the background of the <li id="hotelNav">, and that <li> a child <a> that has it’s own background image that you are not removing.

I recommend changing the :hover to the <a> so that it will replace the background image with your new one.

Sample code… This *should* work, but I haven’t tested it.

You’ll notice that the only change I made was to change "#homeNav:hover {" to "#homeNav a:hover {" for the four menu items.

Code:

@charset “utf-8”;
#nav ul {
list-style: none;
width: 1024px;
float: right;
height: 130px;
}
#nav li {
float: left;
text-align: center;
padding-right: 40px;
width: 108px;
padding-left: 80px;
}
#nav a {
width: 180px;
display: block;
padding-top: 110px;
text-decoration: none;
color: #CC6600;
height: 100px;
background: #333333 url(../Nav_noskulls.jpg);
}

#homeNav a {
background: url(../Nav/images/off_Home.gif) no-repeat left top;
}
#homeNav a:hover {
background: url(../Nav/images/images/on_Home.gif) no-repeat 0 0;
}

#registryNav a {
background: url(../Nav/images/off_registry.gif) no-repeat;
}
#registryNav a:hover
{
background: url(../Nav/images/images/on_registry.gif) no-repeat;
}
#hotelNav a {
background: url(../Nav/images/off_hotel.gif) no-repeat;
}
#hotelNav a:hover
{
background: url(../Nav/images/images/on_hotel.gif) no-repeat;
}
#contactNav a {
background: url(../Nav/images/off_contact.gif) no-repeat;
padding-right: 0px;
}#contactNav a:hover
{
background: url(../Nav/images/images/on_contact.gif) no-repeat;
}
#nav #contactNav {
padding-right: 0;
}

I hope that helps.

[Historical Forums User]

Thank you, this is awesome, it worked perfectly. I was following an examples out of a book that didn’t include rollovers in the template. I’ll backstep more next time.

[Author]

Posts