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 :

Answer 1

Have you tried moving the padding:0 to the form tag and adding !important? I also suggest trying it without fieldset to see if that could be the issue, too.

Answer 2

The frame belongs to fieldset and probably provides unnecessary padding. Did you play with padding of fieldset? (I do not have IE7 on this machine to test it:( )

Answer 3

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 4

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 5

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 6

Thanx for the menu of suggestions Mathew. I had the same problem and I enclosed the textarea tag inside of a span tag and viola! Instant fix.