Position absolute bug on textarea in IE

Question

I have the following code:

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            textarea
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <textarea></textarea>
        </div>
    </body>
</html>

If you test this in any other browser than IE you will see a red box and a textarea that fills the entire area with a 20px padding around it. However in IE (all versions) it will just show a tiny textarea.

The reason I am doing it this way is because I will be using the same effect for a popup that fills the screen and therefore the size is unknown which is why I just specify the position rather than using width and height.

How do I fix this to get it working in IE? jquery perhaps?

Just to confirm using width:100%;height:100%; will not work in this instance

I see the same result in Firefox 5 as you describe for IE. What exactly are you trying to acheive? and if you're simply wanting the text area to conform to the size of the parent div what leads you to say that width, height of 100% will not work? — Jamie Dixon, Jul 25 '11 at 10:48
Oh that's unfortunate. I have something for IE8+ and Firefox 5+ but supporting earlier IE might need some JavaScript — andyb, Jul 25 '11 at 11:51

score 5 · Answer 1 · edited May 23 '17 at 12:04

The problem is that <textarea> is a replaced element and has an intrinsic width and there are rules - CSS2.1:10.3.8 - that govern what the eventual width will be. Ironically, Webkit is at fault here and Gecko is doing it right.

Using this CSS will make it work in Firefox3+, Safari and Opera and IE8+ which is unfortunate as you want it working from IE6 upwards.

IE6 and IE7 at least render the <textarea> at the correct width, so it is just the height that is incorrect. I strongly suggest that IE6/7 be left in this state since the <textarea> is usable. Progressive enhancement here allows modern browsers to render the box in a more accessible way but old browsers are still usable. Failing that, a quick, simple JavaScript function could be used to to set the height for IE6/7 if it must look the same in all browsers.

div#container {
    position:relative;
    top:100px;
    left:100px;
    width:600px;
    height:440px;
    background: #ff0000;
    padding:20px;
}
textarea {
    position:relative;
    width:100%;
    height:100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Reference articles used for this answer

kleinohad · Answer 2 · 2011-07-25T10:58:54.683

there you go (you need to "play" with the textarea width percentage) you can hide the scrollbar with overflow:hidden;

   <!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            textarea
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
            bottom: 20px;
            width:93%;
height:92%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <textarea></textarea>
        </div>
    </body>
</html>

Problem with that is the container changes sizes (when used in a popup) so the percentage causes it to go too big or too small. — Cameron, Jul 25 '11 at 11:30

score 0 · Answer 3 · answered Jul 25 '11 at 11:38

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            .box
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
            }
            textarea
            {

                overflow-y: scroll;
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="box">
                <textarea></textarea>
            </div>
        </div>
    </body>
</html>

Position absolute bug on textarea in IE

3 Answers3

Linked