Form element in DIV - 1px indent top and bottom in IE

[blobb]

hi all,

take a look to the file.

this is form in table, located in DIV layer.

on the left is FF and on the right is IE.
as You see, FF displays it correctly and IE has 1px on the top and bottom.

here is my code:

<div align="center">
<div style="width:600px; margin:0px; padding:0px">
 
<table cellpadding="0" cellspacing="0" style="width:560px; border: 1px solid black; border-collapse:collapse">
 
<tr style="height:15px; border: 1px solid black">
<td style="height:15px; width:15px; border: 1px solid black"></td>
<td style="height:15px; border: 1px solid black; vertical-align:middle">
 
<form action="" style="padding:0px; margin:0px; display:block"><input type="text" maxlength="40" style="width:100px; height:15px; border: 1px solid black; padding:0px; margin:0px; display:block" />
</form>
 
</td>
<td style="height:15px; border: 1px solid black"></td>
</tr>
</table>
</div>
</div>
 

what can You suggest, please?

[philleep]

hi all,

take a look to the file.

this is form in table, located in DIV layer.

on the left is FF and on the right is IE.
as You see, FF displays it correctly and IE has 1px on the top and bottom.

here is my code:

<div align="center">
<div style="width:600px; margin:0px; padding:0px">
 
<table cellpadding="0" cellspacing="0" style="width:560px; border: 1px solid black; border-collapse:collapse">
 
<tr style="height:15px; border: 1px solid black">
<td style="height:15px; width:15px; border: 1px solid black"></td>
<td style="height:15px; border: 1px solid black; vertical-align:middle">
 
<form action="" style="padding:0px; margin:0px; display:block"><input type="text" maxlength="40" style="width:100px; height:15px; border: 1px solid black; padding:0px; margin:0px; display:block" />
</form>
 
</td>
<td style="height:15px; border: 1px solid black"></td>
</tr>
</table>
</div>
</div>
 

what can You suggest, please?

is this all your code? are you using a style sheet at all? i would put all your styling in a style sheet and attach it to the page. include the following code at the top of your css and it will help alot.

*{
margin:0;
padding:0;
border:0;
}

if that doesnt work then post both your css and html up here.

cheer
philleep

[jhardman]

A form inside a table inside a div? why bother? remove the table and the div and do all the positioning with css. It's cleaner, loads faster, and more likely to be interpreted the same in all browsers.

Jared