Pesky Suckerfish Nav

HTML & CSS
21

Threads merged

22

Is the issue still that you want the “About the Fund” text to turn white while hovering over that menu and/or the dropdown but that you don;t want the other two menus at either side to turn white?

If so just target it like this:


li.aboutNav_off:hover > a,
li.aboutNav_on:hover > a {color:#fff}
23

Thanks everyone. I think I have it working now. And yet I still don’t really understand what was going on. I got the white colors to work by using !important. That seemed to do it which tells me it was getting overridden from someplace. I’d like to understand where so I can avoid it going forward.

http://www.savagepixels.com/iselect/index.html

.homeNav_on a { color:#FFFFFF !important; }
.aboutNav_on a { color:#FFFFFF !important; }
.faqNav_on a { color:#FFFFFF !important; }
.homeNav_off:hover a { color:#FFFFFF !important; }
.aboutNav_off:hover a { color:#FFFFFF !important; }
.faqNav_off:hover a { color:#FFFFFF !important; }

Special thanks to Paul and Dave!

24

Hi,

You don’t need important just qualify the rules with the tag name to give them more specificity.

The problem is that you have over-ridden the rules with a:link and a:visited later in the code (you really should keep the reset and default styles at the top of the stylesheet to avoid conflicts like this).


[B].homeNav_on a { color:#FFFFFF }
.aboutNav_on a { color:#FFFFFF }
.faqNav_on a { color:#FFFFFF }
.homeNav_off:hover a { color:#FFFFFF }
.aboutNav_off:hover a { color:#FFFFFF}
.faqNav_off:hover a { color:#FFFFFF }[/B]

/* compulsories */
body { font-family: 'Open Sans', sans-serif; background:#353636 url(../img/site_bg.jpg) top center no-repeat; color:#353535; }
.after { display:block; clear:both; height:0px; visibility:hidden; }
[B]a:link { color:#293952; text-decoration:none; }
a:visited { color:#293952; text-decoration:none; }[/B]

.homeNav_on{} ( without !important) and a:link{} have the same specificity so the one that is later in the stylesheet wins out. If you moved a:link and a:visited to the top of the stylesheet then there would be no need for !important. The sitepoint reference has a good explanation on Specificity (because I wrote it :)). If you still have trouble then use a [URL=“http://specificity.keegan.st/”]specificity calculator and then you can see which has the higher specificity and will win out.

25

DOH!

Thanks Paul. I knew about that. What I did, which was stupid, was to move those rules up to the top while I sorted out the CSS. (Dreamweaver always returns you to the top of the CSS page when you click the tab … which gets to be a major pain if you are always working towards the bottom of the sheet. Anyway, then, after I was done I was gonna move them back to their place … never remembering about the precedence determined by actual location on the style sheet.

Thanks again to all who helped!