image above table containing form 2

[TAMSIN]

I am trying to put an image above a table without a gap between them. I'm using margin-top in css to make sure there isn't a gap. But if the table contains a form, the gap seems to be much bigger. (And of course, its different again in Netscape cf IE). Has anyone come across this?
Thanks
Tamsin

 

[AMayer]

Check out this code. I just tried this and it bumps the image right up against the table:
<div style=&quot;height:59px&quot;><img src=&quot;images/test.gif&quot; width=&quot;180&quot; height=&quot;59&quot; alt=&quot;&quot; border=&quot;0&quot;></div>
<table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;black&quot;>
<tr>
<td><form action=&quot;&quot; method=&quot;post&quot; style=&quot;margin:0;&quot;>
<input type=&quot;text&quot; name=&quot;Test&quot; size=&quot;40&quot; maxlength=&quot;40&quot;>
</form></td>
</tr>
</table>

The image will naturally have a tiny amount of space after it that can be eliminated by setting the line height equal to that of the image height. The form adds the most space but can be taken care of by setting the margin in the form tag.

Hope this helps!

Andrew
amayer@sonic.net

 

[TAMSIN]

Thanks for the help - that nearly worked!!
The example above works fine, but unfortunately, I need to put input boxes in more than one cell. When I move the form tag outside the td (i've tried putting it outside the table, and between the table and the tr) the gap comes back in Netscape. Interestingly, if I put a negative margin for the form style e.g.

<div style=&quot;height:59px&quot;><img src=&quot;tb_topblue.gif&quot; width=&quot;180&quot; height=&quot;59&quot; alt=&quot;&quot; border=&quot;0&quot;></div>
<form action=&quot;&quot; method=&quot;post&quot; style=&quot;margin-top:-20;&quot;>
<table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;black&quot;>
<tr>
    <td>
        <input type=&quot;text&quot; name=&quot;Test&quot; size=&quot;40&quot; maxlength=&quot;40&quot;>
    </td>    
</tr>
</table></form>

then it looks fine in Netscape, but the image disappears completely behind the table in IE. I hate browser incompatibility!

Thanks again,
Tamsin

 

[AMayer]

Can you place the form tag before your image?

<form action=&quot;&quot; method=&quot;post&quot; style=&quot;margin:0;&quot;>
<div style=&quot;height:59px&quot;><img src=&quot;images/test.gif&quot; width=&quot;180&quot; height=&quot;59&quot; alt=&quot;&quot; border=&quot;0&quot;></div>
<table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;black&quot;>
<tr>
<td>
<input type=&quot;text&quot; name=&quot;Test&quot; size=&quot;40&quot; maxlength=&quot;40&quot;>
</td>
</tr>
</table>
</form>

This should work fine in IE or Netscape without setting the form margin. It's probably a good thing, but browser incompatibility is the biggest source of irritation in my life.

Andrew
amayer@sonic.net