I have multiple ways that links (and/or ul's and li's) need to look -- depending on what "container id" they are placed in (whether a div or a table, tr, td, etc.), such as the main nav, footer nav, standard links and lists within the body copy, etc.
I'm confused as to why my styles seem to go and inherit details from other styles if they're not defined within their own (and sometimes even if they are defined?). Example: I have some links that appear as a type of header navigation, and are defined in #purpleTOP a:link, a:visited & #purpleTOP a:hover. They take on the style characteristics of my #secondaryNAV a:link, a:visited & #secondaryNAV a:hover, in that they "float left" and turn the blue color specified for the secondaryNAV (even though white is the specified color for #purpleTOP a:link, a:visited.
Another example: I have the 'generic' ul and li styled to have an arrow image for it's bullet. For my main navigation ul and li, the style is set to "none", but it still is using the arrow.
This causes a ton of chaos especially when it comes to padding or margin for links. And i'm hoping there's an easier way for me to achieve what i'm going for.
I'm just wondering if i'm relying on the id more than i should be? Should i be using classes and styling EVERY link? (seems more code heavy then i'd like..)
(I'm attaching the css files that are attached to my site's template. I eliminated a lot of the information that was obviously not causing issues.)