3 replies [Last post]
TUS
Offline
newbie
Newcastle upon Tyne, England
Last seen: 17 years 21 weeks ago
Newcastle upon Tyne, England
Timezone: GMT+1
Joined: 2004-08-27
Posts: 3
Points: 0

Hi There

I'm a bit of a newbie to CSS, but am pretty sure this should be quite simple. I can't figure out why my code isn't working. Anyway, my CSS code is below. It is stored in style.css, which is called correctly at th top of my webpages. Then, on some specific links, the html is as follows:

<a href="mypage.asp" class="nav1">My Page</a>

So - basically I want all links on my webpages to follow styles set out in style.css under A, whereas links with class="nav1" have a different style attached to them. Simple enough huh?

At the moment the A.nav1:hover style is working great, but when the user is not hovering (i.e. A.nav1) - the links are a blue colour - instead of white.

How can I make these specific links white without changing the style of all my other links on the page?

Thanks in advance, here's my style.css code:

A {
  font-size: 10pt;
  font-family: Verdana;
  font-color: #0000FF; TEXT-DECORATION: none
}

A:hover {
  COLOR: #0000FF; TEXT-DECORATION: none
}
A:active {
  COLOR: #0000FF; TEXT-DECORATION: none
}
A:visited {
  COLOR: #0000FF; TEXT-DECORATION: none
}

TD {
  font-family: Verdana;
  font-size: 10pt
}

P {
  font-family: Verdana;
  font-size: 10pt
}


TR {
  font-family: Verdana; 
  font-size: 10pt
}

INPUT,SELECT,TEXTAREA {
  background-color : #E5EAF3; 
  color:#ff0000;
  font : bold 8pt verdana, sans-serif; 
}

A.nav1 {
  background-color : #FF0000; 
  color : #FFFFFF;
  font : bold 10pt verdana, sans-serif; 
  text-decoration : none; 
  border-bottom : 1px solid #FF0000;
  border-left : 1px solid #FF0000; 
  border-top : 1px solid #FF0000; 
  border-right : 1px solid #FF0000; 
  padding-left : 0; 
  padding-right : 0; 
  padding-top : 0; 
  padding-bottom : 0; 
  text-align : center; 
  width : 100%; 
  height: 18px;
  display : block; 
}

A.nav1:hover {
  background-color : #FFFFFF;
  color: #FF0000;
  font : bold 10pt verdana, sans-serif;
  text-decoration : none;
  border-bottom : 1px solid #FF0000;
  border-left : 1px solid #FF0000; 
  border-top : 1px solid #FF0000;
  border-right : 1px solid #FF0000; 
  padding-left : 0; 
}

TUS
Offline
newbie
Newcastle upon Tyne, England
Last seen: 17 years 21 weeks ago
Newcastle upon Tyne, England
Timezone: GMT+1
Joined: 2004-08-27
Posts: 3
Points: 0

CSS Link Class - Colours Not Working

Just realised that it is working correctly in Opera (v7.51) and Netscape (v7.1) - just not in IE (v6.Innocent.

Wierd - anyone know why this could be happening?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Link Class - Colours Not Working

Your anchor order is incorrect for a start it should be link, visited, hover, active this will cause problems otherwise and your first a dec is overridding the class decs try playing around with a:link and this is a minor point but it's better to get in the habbit of using lowercase for all CSS/HTML/XHTML.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

TUS
Offline
newbie
Newcastle upon Tyne, England
Last seen: 17 years 21 weeks ago
Newcastle upon Tyne, England
Timezone: GMT+1
Joined: 2004-08-27
Posts: 3
Points: 0

CSS Link Class - Colours Not Working

Thanks - got it sorted now.

I need to add visited and active anchors for a.nav1 as well as re-order as you suggested. I guess it was using a:visited because no a.nav1:visited was not specified.

Learn something new everyday! Laughing out loud