Table design not displaying correctly

help with tables

[Enniob]

I have a table to layout some of my website, but when I view on IE it doens't display where I want and on firefox it does...

here is the code...

<table background="images/bg_main.png" width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="53" colspan="3" valign="top">
<form name="frm_newsletter" method="post">
<br />
<img src="images/newsletter.png" alt="" width="84" height="13" longdesc="Newsletter" /><br />
<img src="images/space.gif" alt="" width="16" height="11" />Name: <input id="TextBox" type="text" name="txtFullname" size="30" maxlength="40" />
<img src="images/space.gif" alt="" width="50" height="11" />E-Mail:
<input id="TextBox" type="text" name="txtEmail" size="30" maxlength="100" /><img src="images/space.gif" alt="" width="30" height="11" /><input name="btn_newsletter" type="image" src="images/submit.png" align="middle" />
</form></td>
</tr>
<tr>
<td height="47" colspan="3" valign="bottom"><img src="images/news.png" alt="" width="49" height="12" /></td>
</tr>
<tr>
<td width="327" height="217" valign="top">
<div id="MainText">
Example.com has a special promotion for new members.
Register today and you will get <strong>60%</strong> off our membership. Use the coupon code <strong>NEWMEMB</strong>. Offer expire 01/2007. </div></td>
<td width="10" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td width="342" valign="top">wwww</td>
</tr>
</table>

[edited by: tedster at 6:29 am (utc) on May 26, 2006]
[edit reason] substitute 'Example.com' [/edit]

[tedster]

Hello Enniob, and welcome to the forums.

What DTD are you using? When mixing images and table cells, this can be critical.

Also, a good first step for any cross-browser problems is using the W3C Validator for HTML [validator.w3.org].

[TechnoGeek]

Hello, Enniob.
Your form has the "action" attribute missing, and there is also a repeated ID. Those are the only syntactical errors. However, there doesn't appear to be a clear design intended. If the code is yours, and you are still a beginner, you should try to do something more simple. For example, get rid of the images, and avoid mixing tables and DIVs.
Good luck.

[teenwolf]

Try moving your form and /form tags around. I've found that moving form tags between table and tr cells does the trick.

[tedster]

moving form tags between table and tr cells does the trick.

Do you mean like this:

<table><form><tr><td>
....
</td></tr></form></table>

If so, that is not strict html, and will only validate to transitional. So I'd suggest not getting wrong habits. Nest the entire <table></table> inside the <form></form> or nest the complete <form></form> inside the <td></td>.

<form>
<table>
<tr>
<td>
....
</td>
</tr>
</table>
</form>

...or

<table>
<tr>
<td>
<form>
</form>
</td>
</tr>
</table>

[rocknbil]

Yes, the closing form tag trick is a bad idea. :-)

when I view on IE it doens't display where I want and on firefox it does

Please elaborate on this, **how** is it displaying differently? The HTML you posted is OK for the most part. TD height is pretty much a worthless tag, it only works in IE and then only if some other element doesn't override it, but won't create positioning problems.