Yelgnidroc
10-03-2007, 06:39 AM
I am trying to style hyper links to have a slightly different appearance when hovered over. The following works as I want in FF, but in ie all I get is a small (not fully padded out) yellow background.
Border widths and paddings are exaggerated for debugging.
There is not any css code for table, td or tr.
a
{
border-top:red solid 20px ;
border-bottom:red solid 20px ;
padding:40px;
text-decoration: none;
}
a:hover
{
border-top:blue solid 20px ;
border-bottom:blue solid 20px ;
background-color:yellow;
padding:40px;
}
<body>
<br /><br /><br /><br />
<table>
<tr>
<td><a href="about_us.php">About Us</a></td>
<td><a href="contact_us.php" >Contact Us</a></td>
</tr>
</table>
</body>
Border widths and paddings are exaggerated for debugging.
There is not any css code for table, td or tr.
a
{
border-top:red solid 20px ;
border-bottom:red solid 20px ;
padding:40px;
text-decoration: none;
}
a:hover
{
border-top:blue solid 20px ;
border-bottom:blue solid 20px ;
background-color:yellow;
padding:40px;
}
<body>
<br /><br /><br /><br />
<table>
<tr>
<td><a href="about_us.php">About Us</a></td>
<td><a href="contact_us.php" >Contact Us</a></td>
</tr>
</table>
</body>