Snookerman
03-01-2009, 05:51 PM
I have a textarea with a border and padding and I specified a max-width in order to prevent Safari, Opera and Chrome users to resize the width. Strangely, Firefox (3.0.6 on XP) doesn't respect the box model for the textarea if it has a max-width or a max-height. To show this, I have simplified the code so you can try it for yourselves:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 30px;
}
.border {
border: 4px solid black;
width: 400px;
}
.noborder {
border: none;
width: 400px;
}
div.nomax {
background: #999;
}
div.max {
background: #aaa;
max-width: 400px;
}
textarea {
overflow: hidden;
padding: 0;
}
textarea.nomax {
background: #ccc;
}
textarea.max {
background: #eee;
max-width: 400px;
}
</style>
</head>
<body>
<div class="border nomax">div - width 400px</div>
<div class="border max">div - width 400px, max-width 400px</div>
<textarea class="border nomax">textarea - width 400px</textarea>
<br>
<textarea class="border max">textarea - width 400px, maxwidth 400px</textarea>
<div class="noborder nomax">div - width 400px</div>
<div class="noborder max">div - width 400px, max-width 400px</div>
<textarea class="noborder nomax">textarea - width 400px</textarea>
<br>
<textarea class="noborder max">textarea - width 400px, maxwidth 400px</textarea>
</body>
</html>
As you can see, the first containers and textareas have a 4 pixel border and a width of 400 pixels. The second textarea has a max-width of 400 pixels. They should all have the same width, 400 pixels, and they do in IE, Opera, Chrome but not in Firefox! Instead, Firefox calculates the borders as part of the width. It also calculated the padding but I didn't use that as part of the example, you can try that if you want. I put the same content without borders so you can see the difference better.
Does anyone know why this happens and if there is any workaround it? What I need is a textarea with a width that cannot be resized (height is fine). The reason why I need to specify the width is because I need the textarea to align with other elements and it would not work if some users could change the width. Since I am using both borders and padding for the textarea, this bug causes it to not align in Firefox, but works fine in all other browsers.
I appreciate your help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 30px;
}
.border {
border: 4px solid black;
width: 400px;
}
.noborder {
border: none;
width: 400px;
}
div.nomax {
background: #999;
}
div.max {
background: #aaa;
max-width: 400px;
}
textarea {
overflow: hidden;
padding: 0;
}
textarea.nomax {
background: #ccc;
}
textarea.max {
background: #eee;
max-width: 400px;
}
</style>
</head>
<body>
<div class="border nomax">div - width 400px</div>
<div class="border max">div - width 400px, max-width 400px</div>
<textarea class="border nomax">textarea - width 400px</textarea>
<br>
<textarea class="border max">textarea - width 400px, maxwidth 400px</textarea>
<div class="noborder nomax">div - width 400px</div>
<div class="noborder max">div - width 400px, max-width 400px</div>
<textarea class="noborder nomax">textarea - width 400px</textarea>
<br>
<textarea class="noborder max">textarea - width 400px, maxwidth 400px</textarea>
</body>
</html>
As you can see, the first containers and textareas have a 4 pixel border and a width of 400 pixels. The second textarea has a max-width of 400 pixels. They should all have the same width, 400 pixels, and they do in IE, Opera, Chrome but not in Firefox! Instead, Firefox calculates the borders as part of the width. It also calculated the padding but I didn't use that as part of the example, you can try that if you want. I put the same content without borders so you can see the difference better.
Does anyone know why this happens and if there is any workaround it? What I need is a textarea with a width that cannot be resized (height is fine). The reason why I need to specify the width is because I need the textarea to align with other elements and it would not work if some users could change the width. Since I am using both borders and padding for the textarea, this bug causes it to not align in Firefox, but works fine in all other browsers.
I appreciate your help!