#nav a:link, a:visited {text-decoration: none; display: block; width: 130px; height: 25px; background-image: url(../images/menubg.gif); color: #000000; text-align: center; font-size: 10pt; padding-top: 5px; margin-bottom: 10px; } #nav a:hover {background-image: url(../images/menubghover.gif);} Code (markup): That all works up there but I do not want all the links to so that. I only want the ones in the nav do that. But any link I put elsewhere gets the same thing. Any ideas on how to fix that so I can style other links differently?
It's the way CSS is built-- anything with the name of a box's id gets precedence. So currently you have #nav a which of course overrides anything you set for just a. However, your other links are likely in a box with an id too, right? Like, <div id="main"> or something? So, use that name in the CSS. It will give the two equal footing. #main a { blah blah }
I wouldn't do that unless I was absolutely forced to (like, a script expecting id's on each link). If every link within the #nav box are to act the same as each other, no problem. If the other linke (which are certainly in other boxes on the page anyway) are supposed to NOT act like the links within #nav, then my solution should work. Sometimes I have so many menus I have resorted to crap like #main ul li a:hover just to get enough CSS points to make it override some other menu which is also sitting in #main.