IE7 : an excessive margin in form for textarea

Question

I am trying to deal with an IE7 bug in my application. Here is the HTML/CSS code

<div style="margin-left: 320px">
    <form method="post" action=""><fieldset>
        <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
                  style="margin: 0; padding: 0"></textarea>
    </fieldset></form>
</div>

In Firefox/Opera/Webkit/IE6 it is ok, but in IE7 the textarea have a 100px left margin. If anyone have a tip to correct this, thanks a lot!

Here is a screenshot of IE7 displaying this sample HTML :

http://daneel.net/pub/img/ie7_bug_decalage.jpg

Answer 1

This looks like the inherited margin bug (similar to but different from the double-margin bug with floats). The textarea is inheriting the margin from the div around the form. Position Is Everything describes it in more detail.

The practical workarounds are:

• Give the textarea a negative left margin of -320px (for IE only, obviously).
• Put an inline element before the textarea, but inside the fieldset. It looks like you can set the style to display:none, but the element can't be empty.
• Wrap the textarea in a div/span/any-other-tag as long as it doesn't have any style rule that gives it layout (I actually would have thought the form or fieldset would fix it, but apparently they don't).

Answer 2

Totally weird. I actually get a 320px (=parent div margin) in ie7.

You can overwrite with an ie7 only negative margin, but that's awful...

EDIT: OK, I have no idea why this works, but it works. this is defintely a bug:

<div style="margin-left: 320px; display:inline-block;">
    <form method="post" action=""><fieldset>
        <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
                  style="margin: 0; padding: 0"></textarea>
    </fieldset></form>
</div>