Closed
Bug 257123
Opened 21 years ago
Closed 17 years ago
<div> with "overflow: auto;" inside a <table> loses the scrollbar when window is resized
Categories
(Core :: Layout: Tables, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: tst, Unassigned)
References
(Depends on 1 open bug, )
Details
(Keywords: testcase)
Attachments
(3 files)
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6) Gecko/20040206 Firefox/0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6) Gecko/20040206 Firefox/0.8
<!-- This script shows a bug in Firefox 0.9
As long as the div.messageDivClass has a border or padding,
the width will grow when a new <span> is inserted into the <div>
by the timer.
If you comment out the line "border-style: solid;" in
div.messageDivClass then the problem goes away.
If the <div> is not inside a <table> then there is no problem either.
If the width of div.messageDivClass is not set to 100% then
there is no problem.
If "padding: 5px" is present then the problem shows up until
width is decrease to be below 91%
This problem is not present in Firefox 0.8 or Internet Explorer.
-->
<html>
<head>
<title>Mozilla CSS bug</title>
<style type="text/css">
div.messageDivClass { width: 100%; height: 200px;
background-color: #eeeeee;
border-style: solid;
/* padding: 5px; */
overflow: auto; }
</style>
<script language="JavaScript">
var counter = 0;
function startTimer() {
setTimeout("addTextToDiv()", 1000);
}
function addTextToDiv() {
var node = document.createElement("span");
node.innerHTML = counter + "<br>";
document.getElementById("messageHistory").appendChild(node);
counter++;
if (counter < 50) startTimer();
}
</script>
</head>
<body onload="startTimer();">
<table style="width: 200px; height: 300px;">
<tr><td>
<div id="messageHistory" class="messageDivClass" >
</div>
</td></tr></table>
</body>
</html>
Reproducible: Always
Steps to Reproduce:
Run the script, then resize the Firefox window
Actual Results:
The <div> will expand to it's full height, losing the scrollbar in the process.
Expected Results:
Because the <div> is inside a <table> that has a fixed height, it should not
expand beyond the height of the table.
|
Reporter | |
Comment 1•21 years ago
|
||
Sorry, that was the wrong HTML file:
Here is the correct one:
<!-- This script shows a bug in Firefox 0.9
There are two problems (only tested under Windows 2000):
1. The top and bottom borders are missing.
2. Wait until the the scroll bar shows up, then resize the window.
Now the scrollbar will be gone and the table will take
up the whole height of the window, even though it is support to
be 50% of the height.
In general Firefox seems to have some problem with the window being
resized.
This problem is also present in Firefox 0.8 but not in Internet Explorer.
-->
<html>
<head>
<title>Mozilla CSS bug</title>
<style type="text/css">
div.messageDivClass { width: 95%; height: 100%;
background-color: #eeeeee;
border-style: solid;
overflow: auto; }
</style>
<script language="JavaScript">
var counter = 0;
function startTimer() {
setTimeout("addTextToDiv()", 5);
}
function addTextToDiv() {
var node = document.createElement("span");
node.innerHTML = counter + "<br>";
document.getElementById("messageHistory").appendChild(node);
counter++;
if (counter < 50) startTimer();
}
</script>
</head>
<body onload="startTimer();">
<table style="width: 200px; height: 300px">
<tr><td>
<div id="messageHistory" class="messageDivClass" >
</div>
</td></tr></table>
</body>
</html>
|
||
Comment 2•21 years ago
|
||
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.2) Gecko/20040826
Firefox/0.9.1+
1. Height is not a table property (see
http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1 )
2. WFM
RESOLVED/WORKSFORME ? (I'll leave that for the next guy to set)
|
|
||
Comment 3•21 years ago
|
||
both cases workforme actually.
The fact that something works in IE means nothing.
|
||
Comment 4•21 years ago
|
||
DUPE
*** This bug has been marked as a duplicate of 257122 ***
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago
Resolution: --- → DUPLICATE
|
||
Updated•21 years ago
|
Status: RESOLVED → VERIFIED
|
|
Reporter | |
Comment 5•21 years ago
|
||
(In reply to comment #2)
> Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.2) Gecko/20040826
> Firefox/0.9.1+
>
> 1. Height is not a table property (see
> http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1 )
> 2. WFM
>
> RESOLVED/WORKSFORME ? (I'll leave that for the next guy to set)
Correct me if I am wrong, but my understanding is that indeed the height
ATTRIBUTE to the <table> tag has been deprecated, but a table can still have a
height PROPERTY that can be specified using CSS, just like any other block level
element.
(In reply to comment #4)
> DUPE
>
> *** This bug has been marked as a duplicate of 257122 ***
The problem is probably not a duplicate of 257122 because:
1. 257122 only occurs in Firefox 0.9 but not in 0.8, where as this bug occurs in
both versions.
2. There is a work around for 257122 by setting the width to something other
than 100% and padding to 0. There are no known workaround for this bug.
Status: VERIFIED → UNCONFIRMED
Resolution: DUPLICATE → ---
|
||
Comment 6•21 years ago
|
||
I can confirm on
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3
Only happens when the resize makes the browser content area height less than the
div's height, or if the width of the window changes.
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
||
Comment 7•20 years ago
|
||
I can also confirm on
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Is there any movement on this?, or is this bug being designated a feature? ;)
Simon.
|
||
Comment 8•20 years ago
|
||
The testcase WFM in current trunk build. Can someone confirm?
|
|
||
Comment 9•20 years ago
|
||
Ok, the url still had the old testcase, I've changed it to the testcase from
comment 1.
|
|
||
Comment 10•20 years ago
|
||
This creates a 300px high div with scrollbars. On window resize the div gets
stretched.
|
|
||
Comment 11•20 years ago
|
||
When loaded directly, the overflow:auto div gets immediately stretched.
|
|
||
Comment 12•20 years ago
|
||
http://www.w3.org/TR/CSS21/tables.html#height-layout
"The 'height' property on 'table' boxes is treated as a minimum height"
So the stretching of the div to it's full height seems to be what should be
done here.
However, a quirk behavior of Mozilla might be justified here, see the result of
the various browsers:
testcase, js created testcase, js created standards mode
IE6 scrollbar stretch
Opera8 scrollbar scrollbar
Mozilla scrollbar scrollbar
So in standards mode, Mozilla should always stretch.
In quirks mode, however, current behavior might be wanted, but then should the
div not suddenly stretch, when the window resizes.
|
|
||
Comment 13•20 years ago
|
||
This bug has similarities to bug 210657.
|
|
||
Updated•20 years ago
|
Assignee: firefox → nobody
QA Contact: general → layout.tables
|
||
Comment 14•17 years ago
|
||
Martijn in comment #13
> This bug has similarities to bug 210657.
WFM? (based on behavior described in comment 1)
|
|
||
Comment 15•17 years ago
|
||
Yes, this is now worksforme, using current trunk build.
All testcases now show up the same.
However, I noticed that the bottom border didn't show up anymore in current trunk build, so I filed bug 400015 for that.
Status: NEW → RESOLVED
Closed: 21 years ago → 17 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•