Link Classes: what am I doing wrong?

<style type="text/css">
body {background-image:url('background.png')}
p,table,td,tr,body
{
color:#dedede;
font-family:Verdana;
font-size:11px;
}

p.link
{color:#171313;
font-size:24px;
font-weight:bold;
font-variant:smallcaps;
text-align:right;
}

b,i
{
color:#ffffff;
}

u
{
color:#dedede;
border-bottom: 1px dotted;
border-color:#FFFFFF;
border-bottom-width:2px
}


a.nav:link, a.nav:visited, a.nav:active
{
text-decoration:none;
color:#171313;
font-size:11px;}
a.nav:hover
{
text-decoration:none;
color:#000000;
font-size:11px;}


a:active,a:link,a:visited
{
text-decoration:none;
color:#000000;
display:block;
border-bottom: 1px dotted;
border-color:#000000;
font-size:11px;
text-align:left;}
a:hover
{
text-decoration:none;
color:#000000;
display:block; 
background:#171313;
border-bottom: 1px dotted;
border-color:#000000;
font-size:11px;
display:block;
text-align:left;}


</style>


<center>
<table border="0" cellpadding="8" cellspacing="0" 

background="bgrepeat2.png" width="700px">


<tr>
<td background="mainimg2.png" width="700px" height="223px" 

colspan="2"></td>
</tr>


<tr>
<td width="490px" valign=Top><p align="justify">

Regular, <b>bold</b>, <i>italic</i>, <u>underline</u>, and if you so 

desire to link from this area, a <a href="neopets.com" 

class="nav">link</a>. Anytime you wish to make a link in the <b>main text 

area only</b> you <u>must</u> add class="nav" to the HTML code.

</td>
<td valign=Top>

<p class=link>Link Title
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>

<p class=link>Link Title
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>
<a href="">Link Name</a>

</td>
</tr>

<tr>
<td colspan="2" height="32px" background="borderbottom.png"></td>
</tr>


</table>
</center>

Code (markup):

I'm type a href="" class="nav" but the link shows up as if I hadn't written the class tag at all. Am I doing something wrong?

 

I closed both paragraphs and the links changed:

<p class="link">Link Title</p>

Code (markup):

It looks unrelated to the problem, but see if it gives you the result you want.

 

Having something in the href will affect some browsers.

href="#" is most popular. So put something in your links (though this will affect your visited styles, since # references the page they are on). You can also put real links in there, so you can see regular vs visited styles better.

Second, even though your a.link:blah styles are more specific than a:blah styles, it's also a good habit to get into to write the general styles first and the specific styles later. You can override something not only by specificity but also by order. If two things happen to have the same specificity, the one who comes later overrides the first.

However I believe it's simply the lack of an href source.

 

I figured out my problem. I tried closing some paragraphs, but that didn't help. I also added text into some of the links, but that also didn't help. Which was frustrating. x)

My problem was that my 2nd set of links was defaulting to display:block, so I specifically added that the .nav set should be display:inline. I hope this helps someone else who runs into this problem as well.

 

Links won't default to display: block, because <a> are always inlines (you have to make them blocks by hand) and actually that's what you did:

a:active,a:link,a:visited
{
text-decoration:none;
color:#000000;
[b]display:block;[/b]
border-bottom: 1px dotted;
border-color:#000000;
font-size:11px;
text-align:left;}

Code (markup):

Remember, something written later will override something written earlier if they are the same or less specificity. so a:link was being turned into display: block and you didn't specifically say that a.nav:link should be inline... it was inheriting from a:link. Because a.nav:link is more specific, though, stating display: inline on it lets it override the a:link.
However still watch out for href="". On a menu I did, that was the only link who didn't get the colour I specified (in Firefox at least).