sabkuchindia

The table itself is working fine, but the size of each cell is not correct in Firefox.
Here is a screenshot of what is happening:


<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page:

HTML Code:
<div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0">


<TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td>

<div id="cat">

<table width=900; cellpadding:0px; cellspacing:0px>
<tr align=center>
<td width=20%>
<font face=tahoma><a href="home.html">Home</a></font>
</td>
<td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td>
</tr>
<tr>
<td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td>
<td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td>
</tr>
</table>


</div>
</td></tr></table>
</div>
A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else.

If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks!

SRCollection.biz
Ask Any Question
Money
yellow page

cfountain

The problem is caused by the equal signs '=' in your STYLE tag area. Change all of the equal signs [=] to colons [:]. The equal signs are invalid CSS markup and cause the style rules to be ignored. Hope this helps...

ValleyArch

Hi,

I've always had problems with pages looking different in Firefox and IE. The more you move from nested tables over to DIVs in style sheets, the less this sort of problem occurs.

Sam