Geek Answers Handbook

IE7: excess stock in form for textarea

I am trying to deal with IE7 error 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 this is normal, but in IE7 the text field has a left margin of 100 pixels. If anyone has a clue to fix this, thank you very much!

Here is a screenshot of IE7 displaying this HTML sample:

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

+6
html css margin internet-explorer-7
source share
4 answers

It’s totally strange. I really get 320px (= parent div field) in ie7.

You can overwrite using only negative ie7 field, but this is horrible ...

EDIT: Well, I have no idea why this works, but it works. this is a disgusting error:

 <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>
+4
source share

This is similar to a legacy margin error (similar, but different from a two-float error). The text box inherits the border from the div around the form. Position Everything is described in more detail .

Practical workarounds:

  • Give textarea a negative left margin of -320px (IE only).
  • Place the inline element in front of the text box, but inside the box. It looks like you can set the style to display: none, but the element cannot be empty.
  • Wrap the text box in div / span / any-other-tag if it has no style rule that gives it a layout (I would have thought that a form or set of fields would fix it, but apparently they don’t) .
+7
source share

This seems to be a bug with the default IE style for <fieldset>. I assume that internally IE is styling fields using float code and triggering the notorious double-edge error .

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

+3
source share

another (also terrible) solution is to add &nbsp; right in front of <textarea> ... but IMHO, I'm fine with fighting dirty IE errors with traits decisions ... fire with fire if you ...;)

+3
source share

More articles:


All Articles