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

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>

Answer 2

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 3

Seems to be a bug with IE's default styling for <fieldset>. My guess would be that internally, IE is styling fieldsets using float code and triggering the infamous Double-margin bug.

I managed to defeat the bug simply by putting a wrapper <div> directly inside <fieldset>.

Answer 4

another, (also awful) solution would be to add the   just in front of <textarea>... but IMHO, i'm ok with fighting dirty IE bugs with drity solutions... fire with fire if you will... ;)