3 replies [Last post]
element99
Offline
newbie
Last seen: 11 years 18 weeks ago
Joined: 2009-02-12
Posts: 3
Points: 0

Hello -

I'm using the property "background-image" to get rollovers without messy Javascript on a navigation bar. These image-based rollovers work perfectly in the actual document's . But once I move them to an external style sheet the background images no longer appear. Everything else on the page (floats, etc.) works fine. This navigation menu is built inside a table.

I've pasted the code below but I'm going crazy trying to figure out the problem - any tips? Thanks!

#nav {
width:700px;
height:21px;
}
#tBlock a span {
display:none;
}
#tBlock a:link {
display:block;
width:205px;
height:21px;
background-image:url(Main-Images/Nav/nLeftBlock.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#tProperty a span {
display:none;
}
#tProperty a:link {
display:block;
width:168px;
height:21px;
background-image:url(Main-Images/Nav/nProperty.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#tProperty a:link:hover {
display:block;
width:168px;
height:21px;
background-image:url(Main-Images/Nav/ROLL/nPropertyROLL.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#tTenant a span {
display:none;
}
#tTenant a:link {
display:block;
width:167px;
height:21px;
background-image:url(Main-Images/Nav/nTenant.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#tTenant a:link:hover {
display:block;
width:167px;
height:21px;
background-image:url(Main-Images/Nav/ROLL/nTenantROLL.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#tContact a span {
display:none;
}
#tContact a:link {
display:block;
width:160px;
height:21px;
background-image:url(Main-Images/Nav/nContact.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#tContact a:link:hover {
display:block;
width:160px;
height:21px;
background-image:url(Main-Images/Nav/ROLL/nContactROLL.jpg);
background-repeat:no-repeat;
background-position:top left;
}

AKmiecik
Offline
Regular
Last seen: 10 years 46 weeks ago
Joined: 2009-02-24
Posts: 14
Points: 0

Could it be DOCTYPE

Admittedly I don't know jack about this stuff but I just had a hover problem and changing the DOCTYPE statement to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

got it working.

Good luck

element99
Offline
newbie
Last seen: 11 years 18 weeks ago
Joined: 2009-02-12
Posts: 3
Points: 0

That's not it, unfortunately.

Thanks for your answer - that's not the answer unfortunately since that is the DOCTYPE statement that I'm using.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 12 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Don't forget those relative

Don't forget those relative addresses are relative to the stylesheet's location. When the styles were part of the document, the addresses were relative to the document's location.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.