I have a table in which there are tabs along the top. I am centering the links within the tabs and in order to get it to look, but my problem is in the first <td>. The top image is how it looks in Firefox and how it looks if I take the class=“tabs” out of the first cell (or remove the padding-bottom=“2” from the class. The second one is when I put that class in the first cell. Any solutions on how to get it to look the top image in both browsers.
THE CSS:
td.tabs{
background-image:url(images/nav_tab_default.gif);
background-repeat:no-repeat;
font-size:12px;
vertical-align:bottom;
text-align:center;
[COLOR=Red]padding-bottom:2px;[/COLOR]
}
a.nav_tabs{
color:#000000;
text-decoration:none;
}
THE HTML:
<tr>
<td height="24" width="101" class="tabs"><a href="" target="_self" class="nav_tabs">Dashboard</a></td>
<td width="101" class="tabs"><a href="" target="_self" class="nav_tabs">Contacts</a></td>
<td width="101" class="tabs"><a href="" target="_self" class="nav_tabs">Companies</a></td>
<td width="101" class="tabs"><a href="" target="_self" class="nav_tabs">Opportunities</a></td>
<td width="101" class="tabs"><a href="" target="_self" class="nav_tabs">To Do/Calendar</a></td>
<td width="101" class="tabs"><a href="" target="_self" class="nav_tabs">User Options</a></td>
<td width="101"></td>
<td width="101"> </td>
<td> </td>
</tr>
