CSS question

Smartly Dressed

I'm trying to style an HTML page using CSS.

I have 2 different link styles but I cannot get them independent of each other.

In my case, the styling for the footer links overrides every other link style, even though I have tried to differentiate them.

I know this is a basic question but I just cannot wrap my head around it.

[HTML]<div id="nav">
<ul class="menu">
<li class="mainmenu"><a href="#">Home</a></li>
<li class="mainmenu"><a href="#">Privacy</a></li>
<li class="mainmenu"><a href="#">Ethics</a></li>
<li class="mainmenu"><a href="#">Cases</a></li>
<li class="mainmenu"><a href="#">Contact</a></li>
</ul>
</div>
<div id="footer">
<ul class="footmenu">
<li class="bottommenu"><a href="#">Home</a></li>
<li class="bottommenu"><a href="#">Ethics</a></li>
<li class="bottommenu"><a href="#">Privacy</a></li>
<li class="bottommenu"><a href="#">Cases</a></li>
<li class="bottommenu"><a href="#">Contact</a></li>
</ul>
</div>
[/HTML]

.mainmenu a:link, a:visited {
    display: block;
    float: left;
    width: 100px;
    margin-left: 40px;
    min-height: 40px;
    font-weight:bold;
    text-align: center;
    padding-top: 20px;
    color:#A9B0B3;
    background-color:#3A415A;
    text-decoration: none;
}

.mainmenu a:hover, a:active {
    background-color: #566981;
}

.footmenu a:link, a:visited {
    color: #34344E;
    text-align: center;
    text-decoration: none;
}

.footmenu a:hover, a:active {
    color: #CBDAD5;
}

miralize

.mainmenu a:link, .mainmenu a:visited {
display: block;
float: left;
width: 100px;
margin-left: 40px;
min-height: 40px;
font-weight:bold;
text-align: center;
padding-top: 20px;
color:#A9B0B3;
background-color:#3A415A;
text-decoration: none;
}

.mainmenu a:hover, .mainmenu a:active {
background-color: #566981;
}

.footmenu a:link, .footmenu a:visited {
color: #34344E;
text-align: center;
text-decoration: none;
}

.footmenu a:hover, .footmenu a:active {
color: #CBDAD5;
}

The second selectors need to be refrenced the same as the first e.g .mainmenu a, .mainmenu a:active

KonFusion

Can you throw an example on http://jsfiddle.net/ ?

Smartly Dressed

miralize wrote: »

The second selectors need to be refrenced the same as the first e.g .mainmenu a, .mainmenu a:active

This seems to have fixed it. Thanks for that - saved me a lot of frustration!

KonFusion wrote: »

Can you throw an example on http://jsfiddle.net/ ?

Weirdly, when I ran it on JSfiddle, the links were styled as I had intended. However, when I previewed the exact same code in my browser, I landed with the aforementioned problem. I guess it's just the sensitivity of the script that can lead to different results in different browsers and systems.