Mistake in code or IE?

link not displaying properly in IE 5.0

[seashell]

I have several link classes on one page. One of them is for a single link in a div at the top of the page. The second is for links in a table at the bottom of the page. In IE 5.0 the links in the table at the bottom of the page are picking up the style for the links in the div at the top. It's very strange because the table's hover is working correctly. That leads me to believe I have an error, but it works fine in all later versions of IE, and Netscape 4+ and Mozilla. My html and css validate.

Here's my css:

table.bottom a:link,a:active,a:visited {font-size: 10pt; font-weight: 700; color: #003366; }

table.bottom a:hover {font-size: 10pt; font-weight: bold; color: #6699cc; }

div.faq a:link, a:active, a:visited {color:#003366; font-family:verdana,arial,helvetica,sans-serif; font-size:12pt; font-weight:bold; text-decoration:none;}

div.faq a:hover {color:#6699cc; text-decoration:none;}

Can anyone see anything I missed? I can post my html if you need it.

Thanks!

[seashell]

Hmmm.... seems to be working now. I'm so confused. Thanks anyway!

[DrDoc]

Well, there's still something "wrong" with your CSS.

Let's take a look at part of it:

table.bottom a:link,a:active,a:visited {font-size: 10pt; font-weight: 700; color: #003366; }

What does this mean?
Literally it means: "assign the following style to all anchor links inside a table with class 'bottom', as well as all other active and visited anchors, no matter where they are located".

Since the div.faq selector is formatted the same way, the styles will be applied to all your active and visited anchors.

The correct code should look something like this:

table.bottom a:link, table.bottom a:active, table.bottom a:visited {font-size: 10pt; font-weight: 700; color: #003366; }

table.bottom a:hover {font-size: 10pt; font-weight: bold; color: #6699cc; }

div.faq a:link, div.faq a:active, div.faq a:visited {color:#003366; font-family:verdana,arial,helvetica,sans-serif; font-size:12pt; font-weight:bold; text-decoration:none;}

div.faq a:hover {color:#6699cc; text-decoration:none;}

Or, if you want, the following is even shorter:

table.bottom a {font-size: 10pt; font-weight: 700; color: #003366; }

table.bottom a:hover {font-size: 10pt; font-weight: bold; color: #6699cc; }

div.faq a {color:#003366; font-family:verdana,arial,helvetica,sans-serif; font-size:12pt; font-weight:bold; text-decoration:none;}

div.faq a:hover {color:#6699cc; text-decoration:none;}