Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ extra 2px margin between input boxes with IE

Posted by: chris2009 May 18 2009, 08:18 PM

Hello,

I'm working on a website which has a form with few input boxes and IE is about to run me crazy!!
The code below shows a simple form that I have created just to localize the problem and under FF and Opera everything looks fine but IE inserts a 2px margin around each boxes even with margin and padding set to 0 and I just can't find a way to remove this margin.
This is not a big problem with 2 input boxes but when I have 4, 5 or more, then it becomes an issue.
I know that I could apply a negative margin on the boxes but this would change everything under FF and Opera.
Is there any way to correct this margin under IE? any suggestions? Thanks in advance.

Chris

the code:

<style type="text/css">
*
{
margin:0;
padding:0;
}

form div
{
clear:left;
margin:0;
padding:0;
}

input
{
margin:0;
}

label
{
float:left;
}

</style>

<body>
<form>

<div>
<label for="test1">Test1</label>
<input type="text" name="test1" />
</div>

<div>
<label for="test2">Test2</label>
<input type="text" name="test2" />
</div>

<div>
<label for="test3">Test3</label>
<input type="text" name="test3" />
<div>

</form>

Posted by: Christian J May 19 2009, 05:14 AM

http://www.quirksmode.org/bugreports/archives/2005/10/IE6_input_field_topbottom_unwanted_margin.html offers some workarounds, e.g. removing the border from INPUT and instead applying it to a SPAN around the INPUT.

BTW, if you give the INPUTs IDs (or put the INPUT inside the LABEL and remove the FOR attriute) the LABEL elements become clickable: http://www.htmlhelp.com/reference/html40/forms/label.html