CODEWITHSUNDEEP
htmlcssinternet-explorer-7margin
Cédric Girard
Cédric Girard

Reputation: 3410

IE7 : an excessive margin in form for textarea

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

Upvotes: 6

Views: 4512

Answers (4)

Andrej
Andrej

Reputation: 31

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

Upvotes: 3

yoavf
yoavf

Reputation: 21213

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>

Upvotes: 4

Matthew Crumley
Matthew Crumley

Reputation: 102725

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).

Upvotes: 7

bobince
bobince

Reputation: 536389

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>.

Upvotes: 3

Related Questions