Would like to know how to get a form to stop resizing a table!

Hello peeps,
Okay, I am having a problem with something really irritating.
Basically, I am adding a little network banner at the top of my websites, and in it, I would like a search box which will send a search across all of the networked websites.
At the moment, the table is 29px high (you will see if you put the code below into a browser). However, when I insert a search box into the table, it stretches it higher than 29px high. It is really annoying me...as I cannot work out how to have this search box stay the height of the table, and images (29px). Anyway here is the code, you will probably understand more when you paste it into a html editor, and then view it in your browser:

<table width="100%" height="29" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="541" height="29" valign="top" background="http://www.insectpages.com/topgb.png">
<table width="516" height="24" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="180" background="http://www.insectpages.com/toptab.png"></td>
<td width="336" valign="bottom">
<form action="search.php" method="get">
<input type="text" name="query" style="BORDER-RIGHT: #aaaaaa 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #aaaaaa 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; BORDER-LEFT: #aaaaaa 1px solid; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaaaa 1px solid; FONT-FAMILY: arial; HEIGHT: 20px; BACKGROUND-COLOR: #f9f9f9">
<input type="hidden" name="search" value="1">
<input type="submit" VALUE="&gt;&gt;">

</form>
</td>
</tr>
</table>
</td>
<td width="501" valign="top">
<div align="right"><a href="http:/www.insectchat.com"><img src="http://www.insectpages.com/topforum.png" alt="Insectchat :: Insect Discussion Forums" width="100" height="29" border="0"></a><a href="http://www.insectads.com"><img src="http://www.insectpages.com/topads.png" alt="Insectads :: Buy and sell live and dried insects" width="100" height="29" border="0"></a><a href="http://www.insectstore.com"><img src="http://www.insectpages.com/topstore.png" alt="Insectstore :: Quality captive bred mantids and exotics" width="100" height="29" border="0"></a><a href="http://www.insectgalleries.com"><img src="http://www.insectpages.com/topgallery.png" alt="Insectgalleries :: Public insect galleries" width="100" height="29" border="0"></a><a href="http://www.insectpages.com"><img src="http://www.insectpages.com/toppages.png" alt="Insectpages :: Insect captive care database" width="100" height="29" border="0"></a></div></td>
</tr>
</table>

Any help much appreciated!

 

set the height with CSS, and it won't re-adjust. Better yet, put it in a div, and set the height of that with CSS

 

Have given that a go, but doesn't seem to work.
Just stretches back again

 

try setting the container div to position:absolute;

 

Ah...fantastic! Works a treat, thanks a lot

 

you're welcome!

(it looks like you got it working, so I guess I don't need to reply to your PM, right?)

 

yea thats right, thanks again!

 

Why are you using a table for your layout? Being as you are, you should know something about how tables work. I made a demo, setting cell (td) dimensions. Follow the links on that page to see the full explanations.

Using {position: absolute;} is a poor solution. Table cells, tds, are specifically not treated as a positional reference. You may find you have unexpected results from browser to browser, and possibly from window size to size.

cheers,

gary