Monday, September 25, 2006

Margin Inheritance Bug in IE 5/6

This is documented in a number of blogs, including Quirksmode, but I wanted to repeat it here as a memo to me.

Some people refer to this as the Margin Doubling Bug, but I think inheritance is what’s really happening so it depends whether you prefer to name by cause or by effect.

The Problem
  • Some form elements (esp inputs) inherit the margin of their parent container when you float them. Especially if one uses a fieldset container with margins set.
  • This also happens with some non-form elements in particular circumstances (I haven’t made an exhaustive study to determine precisely when this occurs, but if I run across examples, I’ll post them here).
  • Trying to set margin:0 on the inheriting element does nothing.

The Solutions
Try one of these solutions, in this order, until the problem goes away:
  • Set overflow: hidden on the child element
  • Set display: inline on the child element
  • Wrap the child element in a div and set the float, padding, margin on the div
In my struggles with a floated submit button inheriting a right margin, I had to use the last solution, which is the least preferred since it adds more markup than is really necessary. But even trying to use IE conditional CSS wouldn’t work.


Post a Comment

Links to this post:

Create a Link

<< Home