Margin inheritance bug

When using a margin on a parent container with a child container inside and in there form elements then the margin of the parent container gets inherited to the form elements, and it can't be removed by a margin 0.

The affected form elements are input types, checkboxes, radiobuttons and textareas

The solution is to put an OVERFLOW: HIDDEN on the child container.

Test page Workaround is included
Reported by: Paul van Steenoven.

Explorer 5-6 Windows | Reported on 12 September 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 Cristiano Rastelli on 22 September 2005 | Permalink

The inheritance is not only on parent container, but on the sum of the margins of all parents. When the inheritance is applied on the left the workaround does'nt behave as expected. Some variations of this bug can be found here:
http://www.didoo.net/permalinks/IE_margin-right_inherit_bug_revisited.html

2 Posted by Paul van Steenoven on 23 September 2005 | Permalink

Yikes, this bug has a longer tail then i thought. Thanks for notifying this :)

3 Posted by Cristiano Rastelli on 23 September 2005 | Permalink

A workaround I've found is the well known "display: inline" applied to the form elements suffering of this "disease". Better than nothig.

4 Posted by Margaux on 8 September 2006 | Permalink

Came across this bug lately, but neither solutions offered here (overflow: hidden and display: inline) helped me.

Instead, I had to wrap the errant input button in a div/span tag. I didn’t like having to do it, but nothing else worked.

5 Posted by Wick on 27 October 2006 | Permalink

I have published a further analysis of this bug:

http://blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html