IE6 input field top/bottom unwanted margin

The INPUT (type=text/password) field in IE6 (and older probably too) has a top and bottom margin of 1px in both quirks and standard mode. This can cause a not so nice effect.

(ppknote: Opera and Safari have the same problem with the right margin)

Test page Workaround is not included
Reported by: Marcel Lipovsky.

Explorer 5-6 Windows, Explorer 7, Opera, Safari | Reported on 19 October 2005.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.




Search reports by browser:

Atom RSS

Comments

(Add your own)

1 Posted by Gérard Talbot on 20 October 2005 | Permalink

The fact that such types of input have a top and bottom margin does not prove in any way or manner that there is a rendering bug of any kind. It does not proves in any way or manner that there is a specification violation of some sort.

Browser manufacturers can implement, as they wish, any margin value or any padding value or any border value (or almost any CSS property value) on almost any element. And they do not have to follow what another browser manufacturer does for such element either.

E.g.:
IE 6 default margin on body is 15px (top and bottom) 10px (left and right)

Mozilla 1.x, Firefox 1.x and NS 7.x default margin on body is 8px (4 sides)

Opera 7.x default margin on body is 0px (but has a padding of 8px - 4 sides).

And no one is claiming that one of these browsers has a bug.

2 Posted by David Hyatt on 23 October 2005 | Permalink

This is not a bug in Safari. Form controls in Safari 1.3 and 2 do not respect the CSS border property (they are under no obligation to do so).

This is why you are able to see a bit of the background to the right of the field in Safari. It's not a margin, you just made the control too small, since the test relied on the presence and honoring of the CSS border to get the right width.

Even if/when we *do* honor border, we will probably use box-sizing: border-box for all form controls, and in that case you'll *still* have the gap.

3 Posted by ScratchFury on 25 October 2005 | Permalink

Gérard Talbot, while you are right that browser manufacturers may freely implement any *default* margins/padding that they wish, IE does have a bug in that it will display a 1px top/bottom margin on an INPUT element, even if you specify that it should have no margin at all. Ignoring styles, my good friend, definitely constitutes a bug. Here are some more cases where it is broken and one in which it is not (inside a non-floated span):

https://netfiles.uiuc.edu/mmckelve/www/input-iemarginbug.html

If anyone can figure out how to fix this, I would be eternally grateful!! Thanks!

4 Posted by Andrew Cornett on 6 December 2005 | Permalink

The thing I've found that worked was to use a conditional comment (http://www.quirksmode.org/css/condcom.html) for IE to link to a seperate stylesheet that sets all input margins (top,bottom) to negative 1 pixel (-1px). This gets rid of the 1px auto margin in IE and hides the stylesheet from Firefox or any other browser.

5 Posted by William Bond on 13 September 2006 | Permalink

I have found that the 1px margin can be removed by floating the input element.

6 Posted by Yves Kreis on 24 September 2006 | Permalink

Workaround for all browser:

Set the border of the input element to 0px and put it inside a div with a border of 1px if you need one.