extra 2px margin between input boxes with IE |
extra 2px margin between input boxes with IE |
chris2009 |
May 18 2009, 08:18 PM
Post
#1
|
Group: Members Posts: 1 Joined: 18-May 09 Member No.: 8,637 |
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> |
Christian J |
May 19 2009, 05:14 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
http://www.quirksmode.org/bugreports/archi...ted_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 |
Lo-Fi Version | Time is now: 28th March 2024 - 09:42 AM |