Css rollovers

[jerrynyc]

I have a table with one row and five cells each containing a link. I would like the background to reverse on rollover. When I try this with the hover: selector, only the center part of the cell changes the background. I would like the entire cell to change the background color. Is there a way to do this with CSS? I understand that one can do this with javascript but I would rather use CSS.

This is part of the html

<table>
<Tr>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="Whats.html">What's New</A>
</TD>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="contact.html">Contact Us</A>
</TD>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="FAQ.html">FAQ</A>
</TD>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="links.html">Links</A>
</td>
</TR>
</TABLE>

Here is the CSS

td.toplinks a{
background-color: #ff9966;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
padding: 0;
}
A:link{
color: #006666;
text-decoration: none;
}
A:visited{
color: #003333;
text-decoration: none;
}
A:hover{
display:block;
color: yellow;
text-decoration: none;
background: #006666;
}
A:active{
color: purple;
text-decoration: none;
}

[Nick_W]

The way to do it Jerry is to set the anchors as block level elements instead of inline as they naturally are.

You might need to play with the way you select them of course but the general idea would be:

td a { display: block; }

That'll make them as wide as the container (the td), you may even need to adjust their height to work with your table cells.

Of course, no post like that can go without a slight reprimand from the clean coding police though ;) --- Use a list, instead: it makes more sense!

hehe, hope that helps

Nick

[ProfMoriarty]

Why donīt you want to do it without <td>s and stuff?

<a href="foo.html" class="bgrollover">Link one</a>
<a href="bar.html" class="bgrollover">Link two</a>
<a href="foobar.html" class="bgrollover">Link three</a>

a.bgrollover {
background-color: #f00;
color: #fff;
display: block;
margin: 1px;
padding: 3px;
}

a.bgrollover:hover {
background-color: #00f;
}

Should do it more effectively.

Best regards,

Lars

[jerrynyc]

Thanks everyone for the helpful advice. I will try using the display:block; first as that seems the simplest to try first. The reason I am using tds for the links is mainly for NS4x. It took a long time the get the page to look somewhat decent in NS4x.

[ronin]

ahem... I don't want to be the one to tell you what happened to NS4.x in that 'long time' >;->