form tag leaves a gap

[Agrajag]

i have a 'navigational box' which contains a google search. the box is made up of 3 divs; top, middle, and bottom. the top div contains the title and has a background image with rounded corners. the middle div contains the content. the bottom div has another background with rounded corners.

the problem is, when i place the form tags around the google search, a large gap appears between the middle and bottom tags.

how can i stop this from happening?

thanks

[jscheuer1]

First, I'd try including all three sections in the form tag, ex:


<form>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</form>

If that won't get it or causes other problems, probably this can be addressed by setting the the top margin of the bottom tag and/or the bottom margin of the form tag to less than the default. This can vary from browser to browser but not as much as some other style variations so a happy medium that works for most or all browsers can usually be found, ex:


<form style="margin-bottom:0;">
blah blah
</form>
<div style="margin-top:0;"></div>

Negative values may be used if needed however, if any value other than zero is used, units must be specified. Pixels should be fine, ex:


margin-bottom:-3px;

If you need to resort to negative values, this may render a portion of the content invisible in some (especially Opera) browsers. If this happens, setting the z-index of the partially visible element to one will resolve that:


<div style="margin-bottom:-5px;z-index:1;">