CSS Rollover Help

[Guest detsiwt]

Hi and thanks for taking the time to help!I have a very simple vertical nav bar that I want to do rollovers with. Only want to change the background color for hover and active.My problem is that I cannot get the style to apply to a table cell, only the link itself which means that the entire table cell is not changing color, just the small space around the link.Here is the code I used for the navbar:

<table id="nav" width=254 height=245 border=0>	<tr>		<td class="rollover">			<a href="jobopps.php">Job Opporunities</a>		</td>	</tr>	<tr>		<td  height=1 width=254 bgcolor="2f3538">		</td>	</tr>	<tr>		<td class="rollover">			<a href="#">BGE Policies</a>		</td>	</tr>	<tr>		<td height=1 bgcolor="2f3538">		</td>	</tr>	<tr>		<td class="rollover">			<a href="#">Forms</a>		</td>	</tr>	<tr>		<td height=1 bgcolor="2f3538">		</td>	</tr>	<tr>		<td class="rollover">			<a href="#">Directory</a>		</td>	</tr>	<tr>		<td height=1 bgcolor="2f3538">		</td>	</tr>	<tr>		<td class="rollover">			<a href="#">Holiday Schedule</a>		</td>	</tr>	<tr>		<td height=1 bgcolor="2f3538">		</td>	</tr>	<tr>		<td class="rollover">			<a href="#">Benefit Numbers</a>		<td>	</tr></table>

Here is my CSS:

.rollover a:hover {background-color: #24486b}.rollover a:active { background-color: #336699}.rollover { padding-left : 10px;} 

And here's the call for the navbar from the page itself:

<div id="nav"><?php include("nav.php"); ?></div>

I know I am missing blocking, but when I tried that I still didn't get the desired effect. Thought I'd post what was closest to working and get help from there.All I want is for the background of the table cell to change color.Thanks!

[thescientist]

Here is my CSS:

.rollover a:hover {background-color: #24486b}.rollover a:active { background-color: #336699}.rollover { padding-left : 10px;} 

what if you tried adding td, like this?

.rollover a:hover td {background-color: #24486b}

[ShadowMage]

what if you tried adding td, like this?

.rollover a:hover td {background-color: #24486b}

??????That's not going to work. You can't have a <td> inside an <a>. :)Try it the other way. Remove the a:.rollover { padding-left : 10px;}.rollover:hover {background-color: #24486b}.rollover:active { background-color: #336699} Just realized this won't work for <td>Note, in order for :hover to work in IE you must have a Strict DTDEdit 2:What about setting margin and padding to 0 for the td and then give padding to your <a> tags. That way the <a> tags should fill up the entire <td> and when the background changes it will appear that the whole cell changes..rollover { margin: 0px; padding: 0px; }.rollover a { padding-left: 10px; }.rollover a:hover {background-color: #24486b}.rollover a:active { background-color: #336699}

[thescientist]

??????That's not going to work. You can't have a <td> inside an <a>. :)Try it the other way. Remove the a:.rollover { padding-left : 10px;}.rollover:hover {background-color: #24486b}.rollover:active { background-color: #336699} Just realized this won't work for <td>Note, in order for :hover to work in IE you must have a Strict DTD

stupid google links; it looked like it would work. For the record I didn't test it... :)edit: and maybe make sure the thread I was reading from wasn't from 2005!

[ShadowMage]

stupid google links; it looked like it would work. For the record I didn't test it... :)edit: and maybe make sure the thread I was reading from wasn't from 2005!

[thescientist]

why is a duck?

[ShadowMage]

why is a duck?

Cuz I say it is!

[dsonesuk]

you need to create anchor as block and same size as td similar to belowtd.rollover a{ padding-left : 10px; display:block;}td.rollover, td.rollover a { width:150px;height:25px;}td.rollover a:hover{background-color: #24486b}td.rollover a:active, td.rollover a:focus{ background-color: #336699}

[thescientist]

Cuz I say it is!

fair enough.