Hyperlink picking up hover from class style

In-body styling not eliminating problem

[Furious Styles]

Body:

<div id="logo"> <!-- Logo HTML generated by Photoshop v. 7.0.1-->
<table width=215 border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan=3><img src="_images/300W_logo_idea_2_01.gif" width=215 height=10></td>
<td><img src="_images/spacer.gif" width=1 height=10></td>
</tr>
<tr>
<td rowspan=2><img src="_images/300W_logo_idea_2_02.gif" width=105 height=162></td>
<td style="text-decoration:none;"><a href="http://clientcompany.com"><img src="_images/300W_logo_idea_2_03.gif" width=77 height=130 border=0 alt=""></a></td>
<td rowspan=2><img src="_images/300W_logo_idea_2_04.gif" width=33 height=162 alt=""></td>
<td><img src="_images/spacer.gif" width=1 height=130 alt=""></td>
</tr>
<tr>
<td rowspan=2><img src="_images/300W_logo_idea_2_05.gif" width=77 height=194 alt=""></td>
<td><img src="_images/spacer.gif" width=1 height=32 alt=""></td>
</tr>
<tr>
<td><img src="_images/300W_logo_idea_2_06.gif" width=105 height=162 alt=""></td>
<td><img src="_images/300W_logo_idea_2_07.gif" width=33 height=162 alt=""></td>
<td><img src="_images/spacer.gif" width=1 height=162 alt=""></td>
</tr>
</table>
</div>

From stylesheet, the offending class:

.rss {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #CC9999;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: none;
background: #7C4148;
}
a:active {
color: white;
text-decoration: underline;
background: #7C4148;
}

Okay, I'm calling this class in a magpie rss feed. The body div "logo" is only coded to position the table containing the sliced images.

I've tried rearranging selectors and stacking them, but it only serves to break the page or return links to default states.

Please, please... CSS gods, have pity on me.

:¦

[tedster]

You've got one link in that html, and it's an image. How is the image picking up the hover effect?

[Furious Styles]

You've got one link in that html, and it's an image. How is the image picking up the hover effect?

The image is in a div that appears below the .rss class in order on an external stylesheet.

CSS Zen Garden said to go here: [dbaron.org...]

The information appears to be old but still valid, and I'm getting the underlining in both Safari 1.2.4 and FF 5.0 Mac. IE 5 and 6, of course, just trash the page after the third click on the css swapout images, and refuse to absolutely position all the divs accurately. The page has a stylesheet swapout that controls a background image behind the incoming rss feed, and theimages are preloaded via js.

[tedster]

Not sure I am following all the technology you are integrating here, but can't you just define a new class for the image link - for instance a.no - and give a.no:hover the rules you want?

[Furious Styles]

Okay.

.a.no {
background-color: transparent;
}
a.no:hover {
background-color: transparent;
}

No sooner do I do that, than I lose styling on the hover on the other element. It fixes it on the image, though.

[scottmack]

Styling links is easy:

A.class:psuedoclass {}

a.this:link {}
a.this:visited {}
a.this:hover {}
a.this:active {}

<a class="this"..........

a.that:link {}
a.that:visited {}
a.that:hover {} etc.

<a class="that" ........

[tedster]

I lose styling on the hover on the other element

That should not happen if you don't put class="no" in the other anchor tag.

[Furious Styles]

I waffled on the issue, and decided to do without the anchor href, as it was just a refresher link to the front page. I also learned tonight that IE doesn't work with typical stylesheet switchers.