I came across this exact same bug and I'm very greatful. I discovered on my own that including any text before the input element would cause the element to no longer inherit the property, but what I didn't know was that it only happens when the "direct parent" has margin properties. I simply implemented an unstyled <div> (or <span>) around the element. I'd go as far as calling this the magic bullet! This won't affect rendering in other browsers and certainly solves this annoying problem with IE. Thanks again.

I also documented this margin inheritance bug back in late October -- for a few minutes I thought the IE7 team had forgotten to fix the floated element/margin doubling bug, since I was working with blockified floated labels without a background color or border. I'm a little bitter about the position is everything article, but granted, you did a more accurate writeup & found more workarounds. Nice catch with the text-on-the-same-line-as-the-form-element fix. I updated my post to reflect your findings. Nice work.

Thanks for the article. Like many others I wasted hours trying to figure out this problem (thanks for nothing Microsoft).

Why can’t they (all browsers) just provide a uniform viewport and let their feature set (tabs, extensions, etc.) drive the popularity of their browser?!

Do they really beleive someone will chose to use IE exclusively because some site xyz uses pretty proprietary Microsoft Gradient Filters and IE calculates their box model differently? </vent>

Thank you so much for the span wrap!! I was going out of my mind with input alignment!! Damn IE!!
And it was only happening on IE7!!!

I've found that when it comes to forms, IE has issues rending styles that aren't in a paragraph tag. Try using <p> to separate your form elements instead of <br/>, and then you won't have to use any other workarounds. If you don't want the extra line breaks, simply make a class for your p tag that sets margin to 0 and only use it in your forms.

Another fix: I had the same problem, another quick fix is to add padding to the containing element rather than a margin, this of course is only possible when you are using the margin/padding for positional purposes where there is no visual impact. If you have borders or background colour on your containing element it will affect your design.

Thanks so much for this! This is exactly what I was looking for.

Yet another workaround –
If the wrapper is floated, display inline will do the job:
div.wrapper { float: left; display: inline; }

Enjoy, Simon

I guess i should thank you as well as this bug was a source of unhappiness in the past couple of days for me....
Great article, indeed:)

I thought your great article would solve my problem. Unfortunately, none of the fixes works for me. So I am re-thinking wheather it is actually the inherited margin bug that I struggle with. Nevertheless, I give it a try and post my problem here. If it's a too long or off-topic comment, please feel free to remove it.

Simplified, I have the below markup and styles. DOCTYPE and structure are fix. Everything behaves like it should in Firefox. The forward button is positioned via width and margin-left in the upper right corner of the content div (with the given padding). With pixel values (width: 150px; margin-left: 408px; (405px for IE6's 3px bug)) even IE shows the button like it should.

With em's it's quite different. Now IE oddly adds some more margin-left to the button, but it isn't as much as the margin-left of the parent content div. It's more like the left+right padding of the content div or something to that extent.
As a result, IE 6 pushes the content div to the right more than the wrapping main div allows. The content div therefore jumps below the floating navigation div.

IE7 doesn't ruin the overall layout, but puts the forward button as much to the right as IE6 does.

As of now, I've only come across one acceptable solution: when I declare the left margin in per cent, everything seems ok.
However, I'd like to know what is wrong with my em's. I hope I haven't overlooked anything simple.

very good methods, it work fine, I plan to use this on my customer project, very thanks.

I am having similar problems with my website, but instead of horizontal I get vertical alignment problems with my "

If you add style="margin:0;" to the form element, that also works. As long as your sub-elements have their own alignments, all should be fine.

Thanks for your hint. See another related bug with the IE6 and floating margins:
Float in Float IE6 margin wrong inherted div width Bug

I got it working using CMS Box's workaround. Thanks for telling me :-)

Thanks! I could not work out what was causing this problem as the elements were not floated. Also as 3px happened to be the amount added margin-left I thought that it could have been releated to the float bug somehow.

Wrapping the input's within a div:

..worked like a charm!

Thank you so much.

Thanks so much from me too. This was the last hurdle I had to overcome in a time-critical project. The most elegant solution in my case was the one suggested by Simon (CMS BOX), as I already had a floated container - giving it display: inline was all I needed. But the explanation in the actual article was most helpful as well.

Great fix, quick and easy! Thanks.

Another fix, which won't alter your markup:

For all parent elements using margin-left (in my case, to make room for labels which had position: absolute and a fixed width), substitute those "margin-left: x" with "position: relative; left: x; margin-right: -x;" -- has the same effect, unless you're using a fixed width, in which case, don't use margin-right but instead change "width: y;" to "width: y-x;".

This fix was necessary in my case since I couldn't change the HTML (I'm trying to make hack-free semantic HTML markup the company standard) but had free reign over the CSS.

It works fantastic. Thank you very much for this short solution.

My name is Kurt. I'm interested in similar subjects. I want to say thanks to the author.
I'm owner of Kredyty & konta osobiste.
Have a nice day

IE8 has a giant BUG in it's implimentation of SSL. And rather than displaying a warning when there's a domain name mismatch (Helloooo M$, welcome to the fact that 80% of sites are on SHARED servers!) along the lines of "Hey, there could be a problem, you should be sure this site is who they claim to be", IE8 responds with 2 choices:

Thanks for solution.