Menu picking up wrong class for links

hi,

I have created two different sets of links for my index page. One for my main menu and one for my footer.

However now when i click on a link in the main menu its visited appearence is that of the attributes I have given to the footer. This can be seen at: http://www.alphatest.co.uk

The css code for the main menu is:

#mainNav ul a:link, a:visited  {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
#mainNav ul a:hover, a:active  {
color: #FFFF00;
background:#0099cc; background:url(c2_images/button_over.gif) no-repeat left top;
border:#0099cc;
}

the css code for the footer is:

#footer a:link, a:visited  {
display:inline;
line-height:10px;
text-decoration:none;
color: #ffffff;
font-size:10px;
background:none;
}
#footer  a:hover, a:active  {
display:inline;
line-height:10px;
color: #FFFF00;
font-size:10px;
background:none;
}

Can someone help me with this as it is doing my head in

thanks:(

Hi,
That’s because you set every a:visited with those styles at the bottom of your css. The cascade overrides previous styles.

Just be more specific and target the footer only -

#footer a:link, [B]#footer a:visited [/B] {
display:inline;
line-height:10px;
text-decoration:none;
color: #ffffff;
font-size:10px;
background:none;
}

Hi, the problem is that you define the footer visited styles after the menus visited styles. So as a result they are being used.

You do realize that this selector

#mainNav ul a:link, a:visited  {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}

Is the EXACT same as this?

#mainNav ul a:link  {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}

a:visited  {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}

When you seperate rules via a comma they are completely seperate rules. You’d need to set your visited styles just like you set your other styles :).

So like this

#mainNav ul a:link, [b]#mainNav ul [/b]a:visited  {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}

You need to do the same for the footer and wherever else this is at :wink:

bl****dy hell that was quick!

thanks ryanreese.

Learn something new everyday. However I will continue to get things wrong as i dont want sitepoint top go out of business.:smiley:

cheers

We are glad to help :). People asking questions keeps me busy on my days off from work/school, so feel free! :stuck_out_tongue:

Off Topic:

Of course it was fast, I’m a ninja!

:smiley:

check out the link to your homepage in the sidepanel when you click on your name. when i clicked on it a broken link page came up.

cass27

I saw your visitor message :).

I responded there (as to not make this become off topic)