rocco rocco - 1 month ago 11
CSS Question

Navigation table not aligning properly in Chrome

On one of my old sites, which has a pretty messy and outdated code, I am having problems with navigation menu in Chrome. It aligns perfectly in Firefox and IE but for some reason in Chrome only first 3 tabs get properly centered.

http://jsfiddle.net/8b2Cm/1/

<table width="765" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">




<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr valign="top">

<td width="19%"><a href="http://LINK"><img src="http://LINK" alt="" width="331" height="95" border="0"></a></td>

<td width="81%"><img src="http://LINK/images/logo.jpg" alt="" width="434" height="95"></td>

</tr>

</table>
</td>






<td valign="top" class="back1"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr valign="top">

<td width="1%"><img src="http://LINK/images/left-top.jpg" width="23" height="30" alt=""></td>

<td width="98%" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="90%" class="left-text11"><div align="center"><a href="http://LINK" title="" class="left-text11"> Home</a></div></td>

<td width="10%"><img src="http://LINK/images/line1.jpg" width="8" height="30" alt=""></td>

</tr>

</table></td>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="90%" class="left-text11"><div align="center" class="left-text11">

<? if(!$_SESSION['sbprj_userid'])

{

?><a href="http://LINK/register/" title="Registration" class="left-text11"><strong>Signup</strong></a>

<?

}else

{

?><a href="http://LINK/myaccount.php" title="My Account" class="left-text11">My Account</a>

<?

}

?></div></td>

<td width="10%"><img src="http://LINK/images/line1.jpg" width="8" height="30" alt=""></td>

</tr>

</table></td>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="center" width="90%" class="left-text11"><div align="center"><a href="http://LINK/free-poker-money/" title="Get Free Poker Money" class="left-text11">Free Poker Money </a></div></td>


</tr>

</table></td>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>



<td width="10%"><img src="http://LINK/images/line1.jpg" width="8" height="30" alt=""></td>

</tr>

</table></td>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="center" width="90%" class="left-text11"><div align="center"><a href="http://LINK//" title="" class="left-text11">Poker School</a></div></td>


</tr>

</table></td>

<td><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>



<td width="10%"><img src="http://LINK/images/line1.jpg" width="8" height="30" alt=""></td>

</tr>

</table></td>

<td class="left-text11"><table width="100%" border="0" cellspacing="0" cellpadding="0">





<tr>

<td width="90%" class="left-text11"><div align="center"><a href="http://LINK/news/" title="News" class="left-text11">News </a></div></td>

<td width="10%"><img src="http://LINK/images/line1.jpg" width="8" height="30" alt=""></td>

</tr>



</table></td>

<td class="left-text11"><table width="100%" border="0" cellspacing="0" cellpadding="0">





<tr>

<td width="90%" class="left-text11"><div align="center"><a href="http://LINK/support/" title="Contact Us" class="left-text11">Support </a></div></td>

<td width="10%"><img src="http://LINK/images/line1.jpg" width="8" height="30" alt=""></td>

</tr>



</table></td>

<td class="left-text11"><table width="100%" border="0" cellspacing="0" cellpadding="0">





<tr>

<td width="90%" class="left-text11"><div align="center"><a href="http://www.facebook.com/pokercash4free" target="_blank" title="Facebook" class="left-text11"><img src="http://LINK/images/facebook.png" border="0" width="28" height="25" /></a> <a href="https://twitter.com/pokercashfofree" target="_blank" title="Twitter" class="left-text11"><img src="http://LINK/images/twitter.png" border="0" width="28" height="25" /></a> <a href="https://plus.google.com/u/0/b/112112204165108610596/112112204165108610596/" target="_blank" title="Google+" class="left-text11"><img src="http://LINK/images/googleplus.png" border="0" width="28" height="25" /></a></div></td>


</tr>



</table></td>




</tr>



</table></td>

<td width="1%"><img src="http://LINK/images/right-top.jpg" width="24" height="30" alt=""></td>

</tr>

</table></td>






<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr valign="top">

<td width="1%"><img src="http://LINK/images/top-1.jpg" width="23" height="17" alt=""></td>

<td width="98%" class="back2"><img src="http://LINK/images/back2.jpg" width="9" height="17" alt=""></td>

<td width="1%"><img src="http://LINK/images/right-1.jpg" width="24" height="17" alt=""></td>

</tr>

</table></td>






This is the code, any suggestions on how to fix this ?

Answer

There is a mess with separators.
Some separators are inside table(horizontal table with tabs, by the way, you should put only that table into fiddle and code, not whole the mess making for us harder to understand) cells, other separators come all alone in separate column, therefore they are taking the same place as column. Check it and move them, like it's done in first two tabs

Comments