I have this links list with background images set on them which changes
when they roll over.
The <td> is set valign="middle" however as soon as you apply the
rollover to the link, the text jumps to the top of the <td> instead of
staying middle.
I can not put padding on the top as some links are 2 lines and some are
1 line.
Does anyone know why this is happening?
I have included the code and yes i know that it is not the best way
using tables, but i need it done quickly and not sure how to do it all
in css.
Thanks in advance.
Linds
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
td.backactive {
background-image : url(images/back_active3.gif);
color : White;
font-weight : bold;
font-family : Verdana, Arial, sans-serif;
font-size : 12px;
border-top: 1px white solid;
border-right: 1px white solid;
}
td.backinactive {
background-image : url(images/back_bluinactive3.gif);
background-repeat: no-repeat;
color : #666666;
font-weight : bold;
font-family : Verdana, Arial, sans-serif;
font-size : 12px;
text-decoration: none;
border-top: 1px white solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
}
a.backinactive {
background-image : url(images/back_bluinactive3.gif);
background-repeat: no-repeat;
color : #666666;
font-weight : bold;
font-family : Verdana, Arial, sans-serif;
font-size : 12px;
text-decoration: none;
text-align : center;
border-right: 1px white solid;
}
a.backinactive:visited {
background-image : url(images/back_bluinactive3.gif);
background-repeat: no-repeat;
}
a.backinactive:hover {
background-image : url(images/back_active3.gif);
background-repeat: no-repeat;
background-position: center;
}
td a.backinactive{
display: block;
margin: 0;
width: 93px;
height: 35px;
}
-->
</style>
</head>
<body>
<table width="558" border="0" cellpadding="" cellspacing="0"
dwcopytype="CopyTableCell">
<!--DWLayoutTable-->
<tr>
<td width="93" height="36" align="center" valign="middle"
Class="backactive">Latest<br>
Offers </td>
<td width="93" align="center" valign="middle"><a href="x"
Class="backinactive">Networks</a></td>
<td width="93" align="center" valign="middle"><a href="x"
Class="backinactive">Browse<br>
Phones</a></td>
<td width="93" align="center" valign="middle"
Class="backinactive">Accessories</td>
<td width="93" align="center" valign="middle"
Class="backinactive">Forum</td>
<td width="93" align="center" valign="middle"
Class="backinactive"><!--DWLayoutEmptyCell--> </td>
</tr>
</table>
</body>
</html>
