CSS Issue with display: block
Posted: Tue May 25, 2004 1:25 pm
I am building a table to look like a menu where a hover will change the background of the cell (or appear to...doesn't really).
Here is the Table Code:
Here is the CSS:
This works perfectly fine with the first cell, then each of the other cells only work when you hover over the words (not just anywhere in the cell).
Anyone have any ideas?
Here is the Table Code:
Code: Select all
<div id="Menu">
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr >
<td width="17%" align="center"><a href="#">Weekly</a></td>
<td width="17%" align="center"><a href="#">Sales</a></td>
<td width="17%" align="center"><a href="#">Sales</a></td>
<td width="17%" align="center"><a href="#">Safety</a></td>
<td width="17%" align="center"><a href="#">Safety</a></td>
<td width="*" align="center"><a href="#">Packages</a></td>
</tr>
</table>
</div>Here is the CSS:
Code: Select all
#Menu A{
display: block;
font-family: verdana, arial, helvetica;
font-size: 12px;
line-height: 15px;
text-decoration: none;
color: #ffffff;
background-color: #8fb9da;
border: 1px solid #555555;
padding: 2px 2px;
}
#Menu A:hover{
font-family: verdana, arial, helvetica;
font-size: 12px;
line-height: 15px;
text-decoration: none;
color: #ffffff;
display: block;
background-color: #9AC8EC;
padding: 2px 2px;
}This works perfectly fine with the first cell, then each of the other cells only work when you hover over the words (not just anywhere in the cell).
Anyone have any ideas?