Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 436
Cédric Girard Avatar asked Feb 09 '09 10:02

Cédric Girard


2 Answers

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).
like image 156
Matthew Crumley Avatar answered Sep 28 '22 21:09

Matthew Crumley


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>
like image 31
yoavf Avatar answered Sep 28 '22 21:09

yoavf