Wednesday, February 27, 2008

Nasty IE margin inheritance bug

I've recently been caught out by a nasty IE bug. The symptom is form elements that have strangely large left margins that are not defined in your style sheet:

ie-margin-bug

Luckily it's quite a well known bug and once I stumbled upon the correct keywords to google (margin inheritance bug) there's plenty of advice out there on how to fix it. I found this blog post very useful, it's a shame the guy's stopped blogging there's some great stuff there; I love this pie chart. For me, it was a simple case of getting rid of my form div's margin-left property. Since my left menu floats left anyway the form will sit nicely to the right without the margin. The form elements inherit the margin of their container, so getting rid of it removes the problem.

1 comment:

Wick said...

Hey thanks for the link! I've started blogging again, but as before, it's pretty random in terms of the topic. I own CarComplaints.com so I'm mostly into bringing attention to companies doing the wrong thing in terms of customer service & public relations (Corel & HP, lately).

I'm a web designer though so it's going to be about web design once in awhile :)

So thanks again, have a good one
-Wick