<div> inside a table will increaset its width when new <span> is added




14 years ago
13 years ago


(Reporter: Sheng-Te Tsao, Assigned: Blake Ross)


Firefox Tracking Flags

(Not tracked)



(2 attachments)



14 years ago
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)  Firefox/0.93

<!-- 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.


<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; }


<script language="JavaScript">
var counter = 0;
function startTimer() {
    setTimeout("addTextToDiv()", 1000);
function addTextToDiv() {
    var node = document.createElement("span");
    node.innerHTML = counter + "<br>";
    if (counter < 50) startTimer();

<body onload="startTimer();">
<table style="width: 200px;">
<div id="messageHistory" class="messageDivClass" >

Reproducible: Always
Steps to Reproduce:
run the HTML code shown in "Details"
Actual Results:  
Everytime the timer inserts a new <span>, the <div> will ge wider

Expected Results:  
The width should have stayed constant.
Created attachment 157151 [details]
Reporter's test case

Comment 2

14 years ago
*** Bug 257123 has been marked as a duplicate of this bug. ***
Created attachment 157155 [details]
Simplified testcase

Somewhat simplified testcase (no timers).
The two tables/divs are originally identical. The innerHTML of the 2nd one is
set (to an empty string in this example) in the BODY onLoad handler. This
causes it to grow horizontally by the sum of the widths of its left and right
borders (10 + 10 = 20 pixels, in this example).
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.
Last Resolved: 13 years ago
Resolution: --- → EXPIRED
You need to log in before you can comment on or make changes to this bug.