Link styles crossing over....

I have the following two link styles in my stylesheet:


a:linkDot {color: #FF3300;
text-decoration: none;
font-family : Verdana, sans-serif;
font-size: 9pt;
border-bottom: 1px dotted #0002CC;
}

a:linkDot:visited{
color: #FF3300;
text-decoration: none;
font-family : Verdana, sans-serif;
font-size: 9pt;
border-bottom: 1px dotted #FF3300;
}

a:linkDot:hover{
font-family : Verdana, sans-serif;
color: Maroon;
text-decoration: none;
font-size: 9pt;
border-bottom: 1px solid Maroon;
}




a:linkNav {color: #006633;
text-decoration: none;
font-family : Verdana, sans-serif;
font-size: 8pt;
}

a:linkNav:visited{
color: #006633;
text-decoration: none;
font-family : Verdana, sans-serif;
font-size: 8pt;
}

a:linkNav:hover{
font-family : Verdana, sans-serif;
color: Maroon;
text-decoration: none;
font-size: 8pt;
}





However when I try to use the following:

<a href="#1" class="linkNav">Dwellings</a>

I do see text that is 8 pt in size, but I also get the dotted line under the text which I do not want to see...what can I do to prevent the dotted lines from showing up in links that have a different style?

TIA!

Replace the :'s with .'s except on the pseduo classes.

thanks for getting back so promptly, but would you please explain with an quick example..am not familiar with the term pseudo class.

TIA!

did a google and got it!

Thanks a bunch!!

http://www.w3schools.com/css/css_pseudo_classes.asp