Closed
Bug 276273
Opened 21 years ago
Closed 21 years ago
<textarea> flows outside surrounding <table>
Categories
(Firefox :: General, defect)
Tracking
()
VERIFIED
INVALID
People
(Reporter: cowwoc2020, Assigned: bugzilla)
Details
Attachments
(1 file)
|
1.37 KB,
text/html
|
Details |
If you place a <textarea> with a style "width:100%" inside an enclosing table
with width "100%" then the internal textarea will flow outside the bounds of the
surrounding table.
Code sniplet:
<table border="0" bgcolor="#c3d9ff">
<tr>
<td><strong>Subject:</strong></td>
<td width="100%" bordercolor="#9daecd" bgcolor="#ffffff"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2"><textarea name="textarea" cols="80"
class="width100"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Send"></td>
<td><input type="submit" name="Submit" value="Discard"></td>
</tr>
</table>
Where .width100 is defined as:
.width100 {
width: 100%;
}
|
Reporter | |
Comment 1•21 years ago
|
||
This seems to affect anything within the table, including text input fields, etc.
|
|
Reporter | |
Comment 2•21 years ago
|
||
Here is a full testcase:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a {
text-decoration: none;
}
.style1 {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style11 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em; }
.style19 {
font-size: 1.5em;
font-weight: bold;
}
.style40 {color: #FFFFFF}
.width100 {
width: 100%;
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table border="0" bgcolor="#c3d9ff">
<tr>
<td><span class="style2"><strong>Subject:</strong></span></td>
<td width="100%" bordercolor="#9daecd" bgcolor="#ffffff"><input
name="subject" type="text" class="width100" id="subject" size="60"></td>
</tr>
<tr>
<td colspan="2"><table border="0" bgcolor="#c3d9ff">
<tr>
<td><textarea name="contents" cols="80" rows="20" class="width100"
id="contents"></textarea></td>
<td width="100%"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Send"></td>
<td><input type="submit" name="Submit" value="Discard"></td>
</tr>
</table>
</form>
</body>
</html>
|
||
Comment 3•21 years ago
|
||
This testcase looks almost the same in Mozilla (1.7 and 1.8a) as in IE6.
The textarea looks very small to me, it's certainly not flowing outside the
table to me.
Reporter, could you otherwise attach a testcase that shows the bug?
|
|
Reporter | |
Comment 4•21 years ago
|
||
Martijn,
I clicked on your testcase in comment #3 from within Firefox 1.0 and Internet
Explorer 6.0.2900.2180.
First, under FireFox 1.0, the Subject field flows outside the bounding table by
about 2-3 pixel (look closely!). Under Internet explorer, it stops exactly at
the bounds of the <table>.
Now, I consider FireFox's behavior to be a bug since we surpass the container
boundary, and Internet Explorer to be more correct but still not ideal. The
ideal behavior should be that the subject input field should flow until the end
of the bounding table minus a few pixels for the "insets" (spacing between
counter and inner component).
If you see different output on your end, it is likely we are using different
environments. Are you 100% sure you are using FireFox 1.0 instead of some
internal build? My full version specification is: "Mozilla/5.0 (Windows; U;
Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0". What is yours?
|
||
Comment 5•21 years ago
|
||
CSS 'width' specifies content width. Border, padding and margin areas are not
included. See http://www.w3.org/TR/CSS21/box.html
IE6 is buggy, see
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
-> INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 6•21 years ago
|
||
Just reading the documentation here, it isn't clear to me how I would actually
get the textarea to render the way I *mean* for it to render. If <width> isn't
the way to go, can you please comment on how one *would* get this working?
Having a reference attached to this issue will help users that view it in the
future.
Thank you,
Gili
|
|
||
Comment 7•21 years ago
|
||
Try this:
.width100 {
width: 100%;
-moz-box-sizing: border-box;
}
For IE6, try changing the DOCTYPE so you get the buggy behaviour as
described in the URL above.
|
|
Reporter | |
Comment 8•21 years ago
|
||
Mats,
Isn't there a standard way to get the behavior I am asking for (from a CSS 1 or
2.1 perspective)? That is, I would like to avoid vendor-specific extensions and
have this working across all browsers. I have noticed that in CSS 3.0, the
box-sizing style is standard, but not in 2.1: http://www.quirksmode.org/css/box.html
|
|
||
Comment 9•21 years ago
|
||
(In reply to comment #8)
> Isn't there a standard way to get the behavior I am asking for
Not that I know about.
> I have noticed that in CSS 3.0, the box-sizing style is standard.
That is not true, it is unclear if CSS3 'box-sizing' will become "standard".
See http://www.w3.org/TR/css3-box/#the-box-width
Note that this document is a "Working Draft" (not "standard").
|
||
Updated•20 years ago
|
Status: RESOLVED → VERIFIED
You need to log in
before you can comment on or make changes to this bug.
Description
•