Question about ID and menus.

[GuyBri89]

I am in the process of making a test website, and I noticed that my custom menu was affected by regular CSS.Menu CSS

#navigation{font-family:Arial;font-weight:bold;}#navigation li{list-style:none;list-style-type:none;/* Doing this to make sure the links look the same in all browsers */}#navigation a:link, a:hover, a:visited, a:active;{background-color:#c0c0c0;color:#FF0000;display:inline;margin:0;padding:0;border-bottom: 1px solid red;}

Yet I notice that this CSS affects it somehow.

a:link, a:hover, a:visited, a:active{font-family:"Times New Roman";font-weight:bold;text-transform:capitalize;color:ff00ff;}

Why is this happening?Additional info:OS: Windows 7WB: The feared firefox v3 or 4 (will have to ask the fiance).HTML/CSS/PHP editor: Notepad.

[Fmdpa]

Firstly, it would help to know how the menu looks. Also, you should not be putting a semi-colon at the end of this line of selectors:

#navigation a:link, a:hover, a:visited, a:active;

Properties declared in this^ selector should override the properties declared in this selector:

a:link, a:hover, a:visited, a:active

a:link, a:hover, a:visited, a:active{font-family:"Times New Roman";font-weight:bold;text-transform:capitalize;color:ff00ff;}#navigation a:link, a:hover, a:visited, a:active{background-color:#c0c0c0;color:#FF0000;display:inline;margin:0;padding:0;border-bottom: 1px solid red;}

[GuyBri89]

Yes, but why do they over ride normal links not in the navigation menu?Am I going to have to use more IDs or Classes to fix this?

[thescientist]

Yes, but why do they over ride normal links not in the navigation menu?Am I going to have to use more IDs or Classes to fix this?

simple, because you aren't being specific enough with your selector. If you just use

a:hover

you're going to target all anchor tags. That's why you added the #navigation selector, so that your menu links look different from the rest. So if you have another container with links you want to style seperately, just do the same thing:

#some_element a:hover, a:active

to only target those anchor tags who are in #some_element

[GuyBri89]

simple, because you aren't being specific enough with your selector. If you just use

a:hover

you're going to target all anchor tags. That's why you added the #navigation selector, so that your menu links look different from the rest. So if you have another container with links you want to style seperately, just do the same thing:

#some_element a:hover, a:active

to only target those anchor tags who are in #some_element

Looking at this post and going back through the CSS tutorial on the links chapter, I can see where I went wrong with this one. Thanks.