Closed Bug 264894 Opened 20 years ago Closed 19 years ago

Width resizing problems with tables containing DIVs with overflow set to auto.

Categories

(Firefox :: General, defect)

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

Tracking

()

Status:
RESOLVED EXPIRED

People

(Reporter: timgreen, Assigned: bugzilla)

References

(
URL
)

Details

Attachments

(1 file)

Screenshot
27.74 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001 Firefox/0.10.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001 Firefox/0.10.1

This portal page contains several table objects using DIVs with overflow set to
auto for scrolling their content. The code has been double-checked by several
people and appears not to contain problems, and works fine in IE, Opera and
Safari. When you try to resize the width of the browser window in Firefox 1.0x
the  DIV objects in the 2nd and 3rd columns appear to block width resizing.
Clicking Reload in Firefox makes the problem worse -- then resizing the width
"locks" the DIV objects so that they overlap onto the next column on the right. 

Strangely, using Forward and Back (sometimes repeatedly) in Firefox solves the
problem. Then Firefox will resize the width of the table objects containing the
DIV objects correctly. Also, accessing the page with the URL
http://helpman.it-authoring.com/ (the trailing / is essential!) from a FRESH
instance of Firefox does not display this problem -- this reroutes the browser
to portal.php via an .htaccess rule, and this appears to have the same effect as
using Forward and Back in Firefox. Entering http://helpman.it-authoring.com does
NOT work, however -- then the width resizing bug appears again as described above.

Reproducible: Always
Steps to Reproduce:
1. Visit the URL http://helpman.it-authoring.com/portal.php with Firefox
2. Attempt to resize the width of the page. Columns 2 and 3 block width resizing.
3. Click on one of the "View Thread in Forum" links in the "Announcements
section, then click on Back in Firefox. Width resizing then works again normally.
4. Visit the same site and click on Reload in Firefox. Then try to resize the
width of the page. The DIV objects lock and overlap the adjacent columns.
5. Start a fresh instance of Firefox and visit the site using
http://helpman.it-authoring.com/ (WITH trailing /). Width resizing appears to
work normally. 
6. Start a fresh instance of Firefox and visit the site using
http://helpman.it-authoring.com (WITHOUT trailing /). Width resizing will not work.

Actual Results:  
Width resizing of DIV objects in tables with overflow set to auto does not work
in Firefox unless you click on Forward and Back a couple of times. The DIV
objects block width resizing of the table objects.

Expected Results:  
Table objects should get narrower normally to their minimum width, just as they
do in IE, Safari and Opera.
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.3) Gecko/20041018 Firefox/1.0

WFM

IE/Opera/FF the same
(In reply to comment #1)
> Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.3) Gecko/20041018
Firefox/1.0
> 
> WFM
> 
> IE/Opera/FF the same

Then you probably didn't test it properly. ;))
Attached image Screenshot — 
Testcase to follow
I see similar issues.
The following html works for IE 6 and does not work for IE 1.0

<!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" xml:lang="en" lang="en">
<head>
<script type="text/javascript">

   function changeDivSize(newHeight, newWidth) {
         document.getElementById("myTitle").innerHTML = "height:" + newHeight +
"px; width:" + newWidth + "px; overflow:auto" ;
         document.getElementById("myTitle").style.color = newWidth*1000 +
newHeight*1000;
         
         document.getElementById("myContent").style.width = newWidth ;
         document.getElementById("myContent").style.height = newHeight ;
   }
   
   function resize() {
   
     newHeight = document.documentElement.clientHeight-150 ;
     if (newHeight < 150) {newHeight = 150; }
     newWidth = document.documentElement.clientWidth-150 ;
     if (newWidth < 150) {newWidth = 150; }
     
     changeDivSize(newHeight, newWidth);
     
     window.scroll(0,0);
   }   

   window.onResize = resize;
   window.onLoad = resize;

</script>
</head>

<body onResize="resize()" onLoad="resize()">
<table border="1">    
    <tr>       
        <td bgcolor="#cccccc">          
            <div style="overflow:auto" id="myContent">   
<H4 id="myTitle">PlaceHolder</H4>
Gallia est omnis diuisa in partes tres, quarum unam incolunt Belgae, aliam
Aquitani, tertiam, qui ipsorum lingua Celtae, nostra Galli appellantur. hi omnes
lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna
flumen, a Belgis Matrona et Sequana diuidit. horum omnium fortissimi sunt
Belgae, propterea quod a cultu atque humanitate prouinciae longissime absunt,
minimeque ad eos mercatores saepe commeant, atque ea quae ad effeminandos animos
pertinent important. proximique sunt Germanis, qui trans Rhenum incolunt,
quibuscum continenter bellum gerunt, qua de causa Heluetii quoque reliquos
Gallos uirtute praecedunt, quod fere quotidianis proeliis cum Germanis
contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum
gerunt. eorum una pars, quam Gallos obtinere dictum est, initium capit a flumine
Rhodano. continetur Garumna flumine Oceano finibus Belgarum. attingit etiam ab
Sequanis et Heluetiis flumen Rhenum. uergit ad septentriones. Belgae ab extremis
Galliae finibus oriumtur. pertinent ad inferiorem partem fluminis Rheni.
Spectant in septentriones et orientem solem. Aquitania a Garumna flumine ad
Pyrenaeos montes, et eam partem Oceani quae est ad Hispaniam, pertinet. spectat
inter occasum solis et septentriones.
            </div>  
        </td>    
    </tr>
</table>

</body>

</html>

I mean "works for IE 6 and does not work for Firefox 1.0"
But the issue is fixed now. The code should be changed to
>          document.getElementById("myContent").style.width = newWidth + "px";
>          document.getElementById("myContent").style.height = newHeight + "px";

(In reply to comment #4)
> I see similar issues.
> The following html works for IE 6 and does not work for IE 1.0
> 
> <!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" xml:lang="en" lang="en">
> <head>
> <script type="text/javascript">
> 
>    function changeDivSize(newHeight, newWidth) {
>          document.getElementById("myTitle").innerHTML = "height:" + newHeight +
> "px; width:" + newWidth + "px; overflow:auto" ;
>          document.getElementById("myTitle").style.color = newWidth*1000 +
> newHeight*1000;
>          
>          document.getElementById("myContent").style.width = newWidth ;
>          document.getElementById("myContent").style.height = newHeight ;
>    }
>    
>    function resize() {
>    
>      newHeight = document.documentElement.clientHeight-150 ;
>      if (newHeight < 150) {newHeight = 150; }
>      newWidth = document.documentElement.clientWidth-150 ;
>      if (newWidth < 150) {newWidth = 150; }
>      
>      changeDivSize(newHeight, newWidth);
>      
>      window.scroll(0,0);
>    }   
> 
>    window.onResize = resize;
>    window.onLoad = resize;
> 
> </script>
> </head>
> 
> <body onResize="resize()" onLoad="resize()">
> <table border="1">    
>     <tr>       
>         <td bgcolor="#cccccc">          
>             <div style="overflow:auto" id="myContent">   
> <H4 id="myTitle">PlaceHolder</H4>
> Gallia est omnis diuisa in partes tres, quarum unam incolunt Belgae, aliam
> Aquitani, tertiam, qui ipsorum lingua Celtae, nostra Galli appellantur. hi omnes
> lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna
> flumen, a Belgis Matrona et Sequana diuidit. horum omnium fortissimi sunt
> Belgae, propterea quod a cultu atque humanitate prouinciae longissime absunt,
> minimeque ad eos mercatores saepe commeant, atque ea quae ad effeminandos animos
> pertinent important. proximique sunt Germanis, qui trans Rhenum incolunt,
> quibuscum continenter bellum gerunt, qua de causa Heluetii quoque reliquos
> Gallos uirtute praecedunt, quod fere quotidianis proeliis cum Germanis
> contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum
> gerunt. eorum una pars, quam Gallos obtinere dictum est, initium capit a flumine
> Rhodano. continetur Garumna flumine Oceano finibus Belgarum. attingit etiam ab
> Sequanis et Heluetiis flumen Rhenum. uergit ad septentriones. Belgae ab extremis
> Galliae finibus oriumtur. pertinent ad inferiorem partem fluminis Rheni.
> Spectant in septentriones et orientem solem. Aquitania a Garumna flumine ad
> Pyrenaeos montes, et eam partem Oceani quae est ad Hispaniam, pertinet. spectat
> inter occasum solis et septentriones.
>             </div>  
>         </td>    
>     </tr>
> </table>
> 
> </body>
> 
> </html>
> 


This is an automated message, with ID "auto-resolve01".

This bug has had no comments for a long time. Statistically, we have found that
bug reports that have not been confirmed by a second user after three months are
highly unlikely to be the source of a fix to the code.

While your input is very important to us, our resources are limited and so we
are asking for your help in focussing our efforts. If you can still reproduce
this problem in the latest version of the product (see below for how to obtain a
copy) or, for feature requests, if it's not present in the latest version and
you still believe we should implement it, please visit the URL of this bug
(given at the top of this mail) and add a comment to that effect, giving more
reproduction information if you have it.

If it is not a problem any longer, you need take no action. If this bug is not
changed in any way in the next two weeks, it will be automatically resolved.
Thank you for your help in this matter.

The latest beta releases can be obtained from:
Firefox:     http://www.mozilla.org/projects/firefox/
Thunderbird: http://www.mozilla.org/products/thunderbird/releases/1.5beta1.html
Seamonkey:   http://www.mozilla.org/projects/seamonkey/

This bug has been automatically resolved after a period of inactivity (see above
comment). If anyone thinks this is incorrect, they should feel free to reopen it.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → EXPIRED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: