Comments on: IE6/IE7 form element margin inheritance bug

By: Dave

Dave — Wed, 24 Aug 2011 15:32:53 +0000

Thanks for the help. I re-coded the left margins in the parent container and it worked perfectly.

By: antonio

antonio — Tue, 03 Aug 2010 11:22:22 +0000

Thanks a lot for the documentation of this issue.

My solution was to replace all the margins of the block level parent element with paddings equivalents. Everything is right now

By: chipowski

chipowski — Sun, 25 Jul 2010 14:00:10 +0000

great post. thanks for the info.
overflow: visible worked for me too

By: Georg Sender

Georg Sender — Thu, 25 Feb 2010 12:59:19 +0000

Thanks for clarifying this case. This is really an annoying bug. I wonder if its fixed in IE8.
I prefer the fix. Its quite elegant.
@Missy:
the overflow.visible fix is related rather to the padding than to the margins. But its also useful for fixing the IE padding issue.

I have also found a way to workaround this (not as elegant as the span fix):
put an invisible button – whatever – before the bug-effected element, setting its visibility to hidden and its display property to none by a style.

By: Tom

Tom — Fri, 18 Dec 2009 03:48:26 +0000

Thanks, setting form to display:inline works for me….

By: Martin Funcich

Martin Funcich — Wed, 04 Feb 2009 09:15:00 +0000

Barry’s solution is more realistic if you get into the habit of making your known form-element container divs use this “relative/left/margin-right” technique to substitute margin-left away:

.old {
margin-left: x;
width: w;
}

.new {
position: relative;
left: x;
margin-right: -x; /* only for percentage or auto widths */
width: w-x; /* only for fixed widths */
}

And of course annotate what you’ve done so you can alter the stylesheet confidently in future

By: Tim

Tim — Fri, 21 Nov 2008 23:39:37 +0000

Thanks for the tip.. this was driving my crazy for ages! Bloody IE, with it ever be 100% compliant and bug free?

By: Mark Story

Mark Story — Tue, 08 Jan 2008 17:31:32 +0000

Thanks a bunch! This bug was driving me insane as well.

I solved my issues by using a combination of the span wrapper and overflow:visible; for the input element.

By: Jay Van Buren

Jay Van Buren — Fri, 02 Nov 2007 00:00:18 +0000

Thanks for this post, very helpful!

By: BB

BB — Wed, 15 Aug 2007 15:09:59 +0000

Hi,

Has anyone experienced any problem with checkboxes in IE7?
My checkboxes that work in IE6 dont work in IE7