508890 - Rendering of DIV with style=100% does not scale up to fit inside TABLE cell.

Status: RESOLVED INCOMPLETE

(Firefox :: General, defect)

Description

[arsukdeo]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090806 Minefield/3.6a1pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090806 Minefield/3.6a1pre

Given a table with a style specifying a fixed width, with an inset border, and a DIV with a style specifying a width of 100% (to be scaled up by the rendering engine) to fit inside the table, the DIV overflows.

Reproducible: Always

Steps to Reproduce:
1. Create a table as follows:

<table cellpadding=1 cellspacing=1 style="background:#c0c0c0;width:450px;top:105px;left:100px;border:outset 1px;height:auto">
<tr><td>
    <table cellpadding=0 cellspacing=0 style="width:100%;height:100%">
    <tr><td>
    <tr><td id="data"><div style="background:#FFFFD0;font-size:10pt;color:#404040;padding:2px;border-width: 2px;border-style: inset">Before Test</td></tr>
    </table>
</td></tr>
</table>

2.  Replace the DIV with id="data" with a new DIV having a width=100%, via javascript using innerHTML.

var msg = "<div style=\"width:100%;background:#FFFFD0;font-size:10pt;color:#404040;padding:2px;border-width: 2px;border-style: inset\">this is a test</div>";	
	elm.innerHTML = msg;

3.  See attachment.
Actual Results:  
The DIV overflows the table cell.

Expected Results:  
The DIV should be contained in the table cell.

The rendering should always fit the DIV inside the table for a value <= 100% of the table's width.  

In providing a comprehensive solution to this, for values that are larger, the table should grow to contain the DIV, because tables are generally used to contain dynamic information.  I think this is the required case in general for the majority of sites out there.

Comment 1

[arsukdeo]

Attachment: This attachment demonstrating the bug.

This attachment contains the complete details to illustrate the bug.

Comment 2

[arsukdeo]

Note that this bug exists in the windows version 3.6a2pre.

Just by setting the style width to 100% causes the DIV to overflow the table cell.  This needs to be fixed from the DIV point of view, where it scales up to fit inside the table cell.  Once this is fixed, then we can do a separate test to see if the table grows to hold a DIV larger than the width of a table with one cell.

Comment 3

[Tyler Downer [He/Him]]

Reporter, are you still seeing this issue with Firefox 3.6.12 or later in safe mode? If not, please close. These links can help you in your testing.
http://support.mozilla.com/kb/Safe+Mode
http://support.mozilla.com/kb/Managing+profiles
Also, please consider using the most recent Firefox 4 beta build, your bug may be resolved there.

Comment 4

[arsukdeo]

This issue exists in Firefox 3.6.12 and in general, it is not a bug, but more a practical issue.  The style setting for the width as 100% should result in an auto calculation for an optimum fit inside a container.

Nevertheless, a workaround to this issue is possible, though a bit tidious, and in my opinion, Firefox 3.6.12 is a major improvement for cross platform code between IE8 and Firefox compared to the other browsers.

Comment 5

[Tyler Downer [He/Him]]

No reply, INCOMPLETE. Please retest with Firefox 3.6.13 or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.