allowing <form> tag as <table>

allowing <form> tag as <table> element is NOT valid HTML.

[Cosmin]

Hi,

I did a HTML Check & Repair with Netmechanic.com and gives an error

This is my code but I don't know exactly how to change it. I tried a few things but it messes up my table:

0044: <td width="100%">
0045: <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse">
0046: <tr>
0047: <td background="menu/images/backgrnd_cell_beige.gif">
0048: <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
0049: [2]^
<form method="GET" action="/cgi-bin/advsearch/search.cgi" name="search">
----------------------------------------------
----:[2]^Warning: allowing <form> tag as <table> element is NOT valid HTML.
----:[2]^Hint: try putting <form> tag in table <td> element or <table> in <form> element.
0050: <tr>

----------------------------------------------------
0050: <tr>
0051: <td align="center" class="searchstyle">

[Pricey]

You have not put the form in a cell.

You will need to put it into <tr><td> tag. So it should look something like this:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111"> 
<tr> 
<td align="center" class="searchstyle">
<form method="GET" action="/cgi-bin/advsearch/search.cgi" name="search"></form>
</td>
</tr>
</table>

Phil

[Cosmin]

Thanks Phil,

However still not working. Could you please give me the whole code how it should be. Right now I have:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<form method="GET" action="/cgi-bin/advsearch/search.cgi" name="search">
<tr>
<td align="center" class="searchstyle">
Site Search: </td>
<td align="center">
<input type="text" name="q" size="20" class="topsearch"></td>
<td align="center">
<input type="image" class="submit" src="images/button_ok.gif" value="Search" border="0" align="bottom" name="I1" width="54" height="32"/></td>
</tr>
</form>
</table>

Thanks again

[chadmg]

<form method="GET" action="/cgi-bin/advsearch/search.cgi" name="search">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td align="center" class="searchstyle">
Site Search: </td>
<td align="center">
<input type="text" name="q" size="20" class="topsearch"></td>
<td align="center">
<input type="image" class="submit" src="images/button_ok.gif" value="Search" border="0" align="bottom" name="I1" width="54" height="32"/></td>
</tr>
</table>
</form>

[korkus2000]

Yes your form tag either must be in a <td> tag or surrounding the table. All though browsers will see form tags outside of trs and tds it is not valid markup.

[Cosmin]

Yes I did that.

The problem is that this table (which has the form) is in another cell (with an image as a background) As soon as I make the modification (Phil's code) the back cell expands causing the layout to distort.

Is there a way to control the back table (cell) to keep it's proportions when a table with a form is inserted?

[tedster]

I think the cell expands because the browser is adding default margins to the form element. Try adding this attribute inside your form tag:

style="margin:0;padding:0"

[Cosmin]

Still doesn't work

1. The form is linked to a css file where I have:

.topsearch
{
BORDER-RIGHT: #9d9286 1px solid;
BORDER-TOP: #9d9286 1px solid;
BORDER-LEFT: #9d9286 1px solid;
BORDER-BOTTOM: #9d9286 1px solid;
BACKGROUND-COLOR: #cac4ac;
WIDTH: 150px;
color: #000000;
}

So I added:

MARGIN: 0px;
PADDING: 0px;

With no result.

The whole code of both tables is:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse">
<tr>
<td background="images/backgrnd_cell_beige.gif">
<form method="GET" action="/cgi-bin/advsearch/search.cgi" name="search">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td align="center" class="searchstyle">Site Search: </td>
<td align="center">
<input type="text" name="q" size="20" class="topsearch"></td>
<td align="center">
<input type="image" class="submit" src="images/button_ok.gif" value="Search" border="0" align="bottom" name="I1" width="54" height="32"></td>
</tr>
</table>
</form>
</td>
<td width="1%" align="right" background="images/backgrnd_cell_beige.gif" nowrap>
<font color="#43597D">
<a style="text-decoration: none" class="menulink2" href="http://www.mysite/Scripts/Panier/Voir.asp?b=8514&Language=2">
Your Cart</a></font></td>
<td width="1%" background="images/backgrnd_cell_beige.gif" align="right">
<a href="http://www.mysite/Scripts/Panier/Voir.asp?b=8514&Language=2">
<img border="0" src="images/button_cart.gif" alt="Your Cart" hspace="7" vspace="5" width="37" height="21"></a></td>
</tr>
</table>

What do you think?

[korkus2000]

This is a known problem in IE and it could be in other browsers. I don't know of a work around except for what you did placing the form tag outside of the table. Of course this means it doesn't validate. The style options just never seem to work. Last time I checked even MSN.com was doing this.

[Cosmin]

Can you please explain what are the consequences if "doesn't validate"?

It seems to work fine in my browser.

Thanks

Cosmin

[korkus2000]

Really it means that it is not guaranteed to work in future browseers and really any for that matter. Some browsers will take it and some may choke. Validation usually means that your markup will atleast run in other browsers without problems.

[Cosmin]

Well thank you.

[tedster]

1. The form is linked to a css file where I have:

.topsearch {[rules]}

So I added: MARGIN: 0px; PADDING: 0px;

With no result.

The class .topsearch is applied to your INPUT element - I think the extra margin must be controlled at the FORM element level.

Can you please explain what are the consequences if "doesn't validate"?

We're talking about W3C validation, which you can do online at [validator.w3.org...] There are many conversations here on many of our forums about validation, which you can discover with Site Search or a Google search.

Browsers will display many types of non-valid code - some validation errors can be worse than others. The biggest concern with invalid HTML structure is that you might make parts or even all of your page impossible for search engine spiders to index -- even if browsers are still displaying the page as you intended.

[Cosmin]

You are right Tedster, it works. However it doesn't work in Netscape 4.7 (in Explorer and Netscape 6 is fine now)

I spent all my day trying to fix it. I am a little frustrated because I put a lot of time to make the page compatible with Netscape 4.7 (I still have lots of clients using that browser)

Is there anything else I should try to make it work in Netscape 4.7 (at least right now the whole page is without any html errors)

I see that the top of the table doesn't demand extra space, only at the bottom. The problem is that I have stuff underneath and the design is perfect the way it is.

Cosmin

[tedster]

Netscape 4.7, oh my!

I was going to suggest adding display:inline; to your rules for the form element -- or perhaps just adding this one style rule right inline in the HTML so you don't trash a lot of other pages. You may have to add some line breaks if this rule works, because the browser will not render <form> as a block element anymore.

It's worth a try -- it's a quick experiment that just "might" work when combined with the margin and padding rules.

But I've just about given up on Netscape 4 and at most all I worry about is if the page works, not how it looks. So I've lost touch with a lot of that grumpy old browser's BS. I honestly don't care if a NN4 user gets a text only page with default fonts and margins.

That browser code was a good workhorse in when it was first released over 7 years ago, but it's almost 2004. I have no client left where I need to support NN4 (although one client did ask me about Netscape 3 support today, and I laughed spontaneously.)

[Cosmin]

Where have you been all day?...:)

IT WORKS! (I was really going nuts...)

What do you mean by:

or perhaps just adding this one style rule right inline in the HTML so you don't trash a lot of other pages. You may have to add some line breaks if this rule works, because the browser will not render <form> as a block element anymore.

Right now I have:

<form method="GET" action="/cgi-bin/advsearch/search.cgi" name="search" style="margin:0;padding:0;display:inline">

Is that OK?

P.S. (don't give me any bad news please:)