Hover not working in Firefox [Archive]

Click to See Complete Forum and Search --> : Hover not working in Firefox

roundmidnight

11-18-2009, 11:02 PM

I have searched, but can't find the solution. I understand enough CSS and html to get me in trouble. I have been modifying a free template and have made good progress. It works great in IE8, but I discovered that the links dont work in Firefox or Safari. That is, the links don't link, and the hovers don't hover. Here is the CSS and HTML that deal with this section. I have validated that they are writen correctly. Neither came back with errors. Any help would be greatly appreciated.

CSS -----

/* navigation */
#navigation {
left:50%;
margin:0 0 0 -61px;
position:absolute;
width:122px;
}
#navigation li {
list-style:none;
}
#navigation li a {
color:#fff;
display:block;
height:50px;
line-height:50px;
text-align:center;
text-decoration:none;
}
#navigation li a:hover {
background:#7e673e;
color:#332407;
}
#navigation li a.active {
background:#7e673e;
color:#332407;
}

HTML ----

<div id="navigation">
<ul>
<li><a href="http://dannyobrien.com/2index.html">Home</a></li>
<li><a href="/bio/bio.html">Bio</a></li>
<li><a href="/sounds/sounds.html">Sights & Sounds</a></li>
<li><a href="/blog/index.html">Blog</a></li>
<li><a href="/links/links.html">links</a></li>
<li><a href="/contact/contact.html">Contact</a></li>
</ul>
</div>

Any ideas?

opifex

11-19-2009, 12:28 AM

Try changing this...

#navigation li a {

to this...

#navigation li a, #navigation li a:link, #navigation li a:visited {

and your psudoselector problem should be corrected.

LoVe For HAte in ORDER

:link
:visited
:focus (optional, but if used must go in this order)
:hover
:active

roundmidnight

11-19-2009, 01:01 AM

Thanks for the reply. But no luck. I'm starting to think that it has something to do with margins. I keep reading about overlapping sections that can block likns and hovers. I'll keep chipping away.

Thanks again.

opifex

11-19-2009, 01:03 AM

have a live version you can link to?

roundmidnight

11-19-2009, 01:05 AM

Here it is:

Test (http://dannyobrien.com/2index.html)

Thanks.

opifex

11-19-2009, 02:50 AM

OK... in part it is a flaw in the layout, but can be fixed by adding a z-index to the #navigation div

#navigation {
left:50%;
margin:0 0 0 -61px;
position:absolute;
width:122px;
z-index:100;
}

The page DOES NOT validate!
move the javascript link into the head... NOTHING goes between <html> and <head>
Some errors are due to the html "comments"... they are taking out a couple of closing tags... delete them and make sure the affected tags get closed.
Replace the "&" in "Sights & Sounds" with "&"
and... loose the <center> tag... doesn't exist in xhtml.

I did this and it works locally in Firefox and Chrome AND the xhtml validates W3C via direct input.

Just a note - the majority of the "free templates" that you find on the web don't validate even though they claim to and usually have several design flaws and errors. If you plan to use one, test it as it came and fix it before trying to adapt it to what you want... it will save a lot of headaches!

roundmidnight

11-19-2009, 11:27 AM

Fantastic! Works great. Thank you very much for your help..