Closed Bug 276273 Opened 20 years ago Closed 20 years ago

<textarea> flows outside surrounding <table>

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: cowwoc2020, Assigned: bugzilla)

Details

Attachments

(1 file)

Testcase from comment 2
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">&nbsp;</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%;
}
This seems to affect anything within the table, including text input fields, etc.
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%">&nbsp;</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>
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?
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?
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: 20 years ago
Resolution: --- → INVALID
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
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.
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
(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").
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: