HTML - Table Size???

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:

http://img35.imageshack.us/img35/1938/tabletroubles.gif


Here is the head of my page, the css for the table is he

HTML Code:

<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!

Hello,
I am new to HTML and have been working on making some changes to a page on our existing web site. I wanted to separate links into separate tables so that the links are grouped by type. I got as far as creating the separate tables and putting in the data as I would like it to appear in the tables but I seem to run across a problem getting them to all line up so that they are the same width and are located underneath each other (lined up vertically). My html coding is attached as a txt file should some fantastic person who I will adore look at the html code and figure it out. I think it has to do with the fact that the page itself was set up with a table and my tables are within the main table??? Hope this makes sense! Thanks much!

My new website test pages are at: http://www.monkeygambling.com/new%20pages/index.shtml

I have a small probelm with the menu on the left side. It is not vertically aligned. The reason why is that I have an empty table inserted above it. This table is quite important as it makes the search engine spider miss the left menu out and move to the central section.

My question is, is there a way to make this table exisit with no size (e.g. height =0), or just be there without affecting anything else?

thanks

I am creating a web app. that reads data from a database and then displays it on a page. I found a solution and incorporated it into my layout but it is not working technically. Even when entering data manually into the form field I get an overflow.

The issue is the overflow. My table is wrapped in a div tag that limits its size to the width of its parent container, and my table has a set width. Even with all this my content will continue horizontally, almost like its reaching the width of my page (starting from the start of the table).

What i would like the content to do is once it reaches the end of the div container it starts a new line in the table. I do not want to use any scrolling. Just fill my page vertically with content.

Thanks!

Hi,

I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside.

the fourth row of the table has three cells side by side that I use as the header design.
1) picture 2) space 3) title
I want all these to have fixed widths and heights.

underneath is a cell that spans the length of all three of those.
This is where I want my content.
4) content
The length of this stays fixed but the height changes as more content is addes.

The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell.
Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell.
And this really messes up the nice spacing I had.


Any thoughts on why this would happen???

I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help!

Thanks so much,


heres my code:





[font="Courier New"]
<body>
<table width="875" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td>
</tr>


<tr align="center">
<td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666">
<h1 class="menu">
<ul>
<li><a href="#" class="mainmenu">Home</a></li>
<li><a href="#" class="mainmenu">Party in the Park</a></li>
<li><a href="#" class="mainmenu">Info</a></li>
</ul>
</h1></td>
</tr>


<tr>
<td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td>
</tr>





<tr align="left" valign="top">
<td width="190" rowspan="2">
<img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td>
<td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td>


<!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! -->

<td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td>
<td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td>
<td width="370" height="275">
<p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party
<br />
in the Park</strong></font><br />
<h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br />
<font color="#666666">DATE </font>Saturday, October 13 2008 <br />
<font color="#666666">TIME</font> From 8am until late afternoon<br />
<font color="#666666">INFO</font> Call 704.463.1308</h2></p>
</td>
</tr>


<!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! -->

<tr>
<td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33>
<img src="../images/10spacer.png" width="10" heigh="10"><br />
<h2 class="text">Party in the Park is an annual Richfield tradition started
in 199X to gather the town's residents and their friends together to enjoy
good food, fun entertainment and each other's company. This year we'll
have blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah. The morning will end right with our famous Cush cookoff!
Party in the Park is an annual Richfield tradition started in 199X to
gather the town's residents and their friends together to enjoy good food,
fun entertainment and each other's company. This year we'll have blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah. The morning will end right with our famous Cush cookoff! </h2>
<br /><img src="../images/25spacer.png"><br />
<p><h1 class="menu2">Features</h1></p>
<p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p>
<p><h1 class="menu2">Flyer</h1></p>
<p><h1 class="menu2">Directions</h1></p>


</td>
</tr>

<!-- And everything from here on out seems to be fine from what I can tell -->



<tr>
<td height="75" colspan="5">&nbsp; </td>
</tr>
<tr>
<td colspan="5" valign="top"><hr width="100%" padding-bottom="1px">
<div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email
us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td>
</tr>



</table>

</body>



thanks again for any help guys!