Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">       
        #textarea1 {
            width: 100%;
            overflow:hidden;
        }
        #table1 {
    background-color:#0000ff;
    width: 100px;
        }
    </style>
</head>
<body>
    <form id="form1">
    <table id="table1" >
        <tr><td><textarea  cols="0" rows="2" id="textarea1"></textarea></td></tr>
    </table>
    </form>
</body>
</html>

The textarea is not rendered correctly by ie8 in the table (it is wider than its cell). If I remove the doctype tag it renders correctly. Am I doing something stupid

Answer 1

IE, for some reason, interprets 100% width of a table cell as 100px-(padding/2), inherited from your #table1 width property. Now here s where it really screws up: the table has a default cellspacing of 3 pixels, so technically, your cell should be 94px wide, and 100% of that width should be... 94px. Instead, it s applying 100px.

If you explicitly set the width property of the table cell, it can correct it, but only after you set the cellspacing and cellpadding to 0, and the border-width of the textarea to 0.

e.g.:

#textarea1 {
width: 100%;
overflow:hidden;
margin:0;
padding:0;
border:0;
}
#table1 {
background-color:#0000ff;
width: 100px;
padding:0;
margin:0;
border-spacing:0;
border-collapse:collapse;
}
#table1 td {
width:100px;
padding:0;
margin:0;
}

The alternative, if you want normal borders around your textarea, is to define a width for the td as 100px - border-wdith*2.

Hope that helps, nd

Answer 2

cols="0" seems a bit daft. Set that to a sensible value for users without CSS.

You might want to try removing borders and padding from the textarea:

#textarea1 {
    width: 100%;
    overflow:hidden;
    margin: 0;
    border-style: none;
    padding: 0;
}

width refers to the width of the element’s content area, i.e. the area inside the margin, borders and padding

Answer 3

I found out that if you re using <asp:textbox> control, with attributes runat="server" and TextMode="MultiLine", it works fine. And if you view the source - strange enough - what you get is a html textarea just as you would have defined it (I could not find any differences between the asp rendering and a straight-forward html definition of a textbox within a table).

If you have asp.net anyway, you can use it easily that way, it renders nicely. All you have to do is to put the prefix "ctl00_MainContent_" before the ID (or whatever ASP.NET renders in your case depending on the surroundings) - just look it up once via "view source" in IE or with the developer toolbar.

So in jQuery, a

$( #ctl00_MainContent_myTextbox ).val()

would retrieve the value, if

<asp:TextBox ID="myTextbox" runat="server" TextMode="MultiLine" style="height:50px; width:90%"></asp:TextBox>

is defined in your code. You can put the prefix #ctl00_MainContent_ in a variable for your convenience, e.g.:

var aspPrefix= #ctl00_MainContent_ ; // global variable
var textValue = $(aspPrefix+ myTextbox ).val(); // example to get value

Everything else works as you would expect it.

友情链接