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.

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home