Page (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/media">http://www.medford.k12.or.us/media</a><!-- m -->)
CSS (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/media/styles.css">http://www.medford.k12.or.us/media/styles.css</a><!-- m -->)
OK, so as the subject sugests, The hover background on #nav isn't showing on firefox, any ideas why?It didn't work in Mozilla either. That was because you had the background-attachment: property set to fixed. IE doesn't support fixed so it used the default value of scroll, which is what Mozilla and IE want for background-attachment.
I also altered your CSS to include the BG image in the general <a> tag style declaration, but using the background-position: property, I moved it out of view. Then in the a:hover style declaration I moved the same BG image back in view. That way there isn't any lag time between when you first hover over the link and when the background image appears.
#nav li a {
padding:0px 5px 0px 5px;
color: white;
background:#336699;
text-decoration: none;
display:inline;
background: #336699 url(hoverbg.gif) repeat-x scroll 0 -25px;
}
html>body #nav li a {
width:auto;
}
#nav li a:hover {
background: #2586d7 url(hoverbg.gif) repeat-x scroll 0 100%;
color: white;
}
See the ALA article called Sliding Doors of CSS Part II (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors2/">http://www.alistapart.com/articles/slidingdoors2/</a><!-- m -->). Pay special attention to the section entitled Single-image rollovers.
CSS (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/media/styles.css">http://www.medford.k12.or.us/media/styles.css</a><!-- m -->)
OK, so as the subject sugests, The hover background on #nav isn't showing on firefox, any ideas why?It didn't work in Mozilla either. That was because you had the background-attachment: property set to fixed. IE doesn't support fixed so it used the default value of scroll, which is what Mozilla and IE want for background-attachment.
I also altered your CSS to include the BG image in the general <a> tag style declaration, but using the background-position: property, I moved it out of view. Then in the a:hover style declaration I moved the same BG image back in view. That way there isn't any lag time between when you first hover over the link and when the background image appears.
#nav li a {
padding:0px 5px 0px 5px;
color: white;
background:#336699;
text-decoration: none;
display:inline;
background: #336699 url(hoverbg.gif) repeat-x scroll 0 -25px;
}
html>body #nav li a {
width:auto;
}
#nav li a:hover {
background: #2586d7 url(hoverbg.gif) repeat-x scroll 0 100%;
color: white;
}
See the ALA article called Sliding Doors of CSS Part II (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors2/">http://www.alistapart.com/articles/slidingdoors2/</a><!-- m -->). Pay special attention to the section entitled Single-image rollovers.