Search box length problem

I have this seach box problem. Without a table, the search box is just the right length in IE9. But in Firefox it's way too long and also in Chrome.

I placed the search box in a table and that didn't help. The seach box is still different lengths inside the table. I then placed the search box inside a DIV. that didn't help either.

How can a person keep a search box the same length in all browsers?

Here is my code:

<table>
<table border="0" bordercolor="0" width="200" bgcolor="f0f0f0"><tr><td>

<div><style>
.searchBox{
background-image:url('index_files/tmg.gif');
background-repeat:no-repeat;
padding-left:20px;
}
</style>
<form style="margin:0;" method="get" action="http://www.mysearchengine.com/cgi-bin/ts.pl">
<input type="hidden" name="index" value="000000" />
<input type="text" name="query" class="searchBox" name="query" value="Search" size="22" onfocus="if (this.defaultValue==this.value) this.value='';"></form></div></tr></td></table>

If thats your code WITH the table, its not correct.

<form>
<table>
<tr>
<td><input type="text" size="35" /></td>
</tr>

</table>
</form>

Okay, I'll redo it right now. Thanks, Teed. I appreciate your help. And I need it!

I'll post back asap.

Anyone have any suggestions? I redid my code as Teed said, but all three browsers see the search box in different lengths.

IE, Firefox, and Chrome all three display the search box differently, with Chrome about 40 pixels longer than IE.

I thought a table would keep it from expanding, but it didn't

Do you have a link to your live site so we can view it in different browsers?

This thread may help you.

http://www.codingforums.com/showthread.php?t=223635

Hi Teed,

It's just an IP until I get it all built and switch the domain. I'm not nearly as good as you guys, but I'm learning and doing everything myself.

Here is the link: http://96.9.48.31

The search box is in the upper right-hand corner, under the weather. In Chrome, I notice my outside border doesn't show either.

Thanks for taking a look guys.

Hey guys, I should tell you, it's my site and I'm doing it for myself. I don't want you think I'm doing it as a job for someone and getting paid.

I could just use some help. Thanks.

I didn't say you were. It is in my signature. Did you even try anything of the CSS in the thread I posted?

Hi Aerospace Eng,

Yes, I did. I even used all of your code and placed a sentence under all four of the boxes. It reads, "This is a test to see how far the box stretches." In IE, your boxes reach to the "b" in the word "boxes." In Firefox and Chrome, your boxes reach to the "x" in boxes.

This is a small problem, but a problem nonetheless. Apparently when a "query" is added to such a box, the problem becomes worse.

I don't understand how browsers can read the same code and interpret it so differently, especially clean code of simple boxes.

Thank you for your help. I will try anything you suggest.