Div ID vs. Div class

Problems problems...

[shimeal]

I am using the following CSS code:

body {
margin: 0;
padding: 0;
text-align: center;
color: #666666;
background: #e5e5e5;
font: 90% 'Trebuchet MS', Verdana, Georgia, Arial, sans-serif;
}
a {
text-decoration: none;
color: #9C9969;
}
a:visited {
color: #BDBB9B;
}
a:hover {
border-color: #7A7636;
color: #7A7636;
}
#rap {
width: 760px;
margin: 20px auto 20px auto;
padding: 0;
text-align: left;
line-height: 18px;
background: #fff url('img/bodybag.gif') repeat-y center;
border:#ccc 1px solid;
}
#header {
margin: 0 auto;
border-bottom: 1px solid #ebebeb;
background: #000000 url('img/sidetitletall.png') repeat-x top center;
}
.header a:hover {
color: #7A7636;
background-color: transparent;
}

.header a {
padding-left:4px;
padding-right:4px;
font-size: 1em;
font-color:#000000;
}

In the following HTML code:

<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<div class="header">
....
<tr><td>
<a href="http://www....com/index.php">Home</a> ¦ <a href="http://www....com/index.php/weblog/archives/">Archives</a> ¦ <a href="http://www.....com/index.php/weblog/contact/">Contact</a> ¦ <a href="http://www.....com/index.php/about/">About</a> ¦ <a href="http://www.....com">Media</a> ¦ <a href="http://www.....com">Travels</a></td></tr></div>
</table>

The problem I am having is when I look at this page, the <a href> links text isn't visible (i.e. Media, Home, Travels). What is REALLY STRANGE is that the dividers between the links (i.e. these ¦ ) do show up in black the way they are supposed to. Can anyone tell me why from the above code?

[carhire]

I'm no expert but the things I would try are:

1) Firstly change the ID or class names to something different, my personal point of view is that with the names being exactly the same confusion is more likely.

2) Change the order of your psuedo classes in the header class, i think for links it should be LoVe HAte...As in Link, Visited, Hover, Active.

3) In your .header a: class you've set the font color using "font-color". Should this not be just "color"?

Like I said, I'm no expert so I apologise if this is wrong/obvious. Hopefully it'll help you though.

[Anticlue]

Hi,

In my understanding the difference between class and id is that id is only used once in a page, where as class can be used multiple times.

I'm assuming the header should only be used once. So try this

#header {
margin: 0 auto;
border-bottom: 1px solid #ebebeb;
background: #000000 url('img/sidetitletall.png') repeat-x top center;
}
#header a:hover {
color: #7A7636;
background-color: transparent;
}

#header a {
padding-left:4px;
padding-right:4px;
font-size: 1em;
font-color:#000000;
}

Also changing the div to

<div id="header">

HTH,
Anticlue