319580 - nesting of multiple elements which use different positioning schemes become invisible when a certain parent element has no visible border

Status: RESOLVED FIXED

(Core :: Web Painting, defect)

Description

[Ralf Vitasek]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

sounds strange? it is :(

this example will show you what i mean:

<table border=1 cellpadding=0 cellspacing=0 width="100%">
  <tr>
    <td>
      <div style="background:silver; width:100%; height:300px; position:relative">
        <div style="background:gray; width:100%; height:300px; position:relative">
          <div style="background:green; width:50%; height:200px; position:absolute">111</div>
          <div style="background:blue; width:50%; height:100px; position:absolute; left:50%">222</div>
        </div>
      </div>
    </td>
    <td width=150>333
    </td>
  </tr>
</table>

looks fine so far. but now change the border attribute value to "0".
took me a while to find the reason why some content on my pages got missing since i upgraded to FF 1.5.

FF 1.0.x doesn't have that problem.

this is a simplified sample. same things happens when css borders are used. and i'm not sure if it has something to with the table.



Reproducible: Always

Steps to Reproduce:
1.create a html file with my sample table and open in FF 1.5 (renders correctly)
2.change the border to "0"
3.reload and wonder what happened

Actual Results:  
content disappears when border is set to 0

Expected Results:  
of course the border should _not_ affect rendering.

Comment 1

[Ralf Vitasek]

Attachment: sample with active border

Comment 2

[Ralf Vitasek]

Attachment: sample with border set to "0"

Comment 3

[Thomas Andrews]

Attachment: Validating example with only one percentage size (rest in pixels)

Okay, this can be simplified.  For some reason, the 100% width in the outer div is being calculated as zero, so all the other inside divs are being calculated as having width zero, too.

If we put absolute values everywhere except for the outer div's width, we get:

<table border="0" cellpadding="0" cellspacing="0" style='width: 800px;'>
  <tr>
    <td>
      <div style="background:silver; color: black; width:100%; height:300px;">
       <div style="background:green; color: black; width: 325px;height:200px; po
sition:absolute;">111</div>
      </div>
    </td>
    <td style="width: 150px;">333</td>
  </tr>
</table>

But this renders as if the outer div and its containing <td> cell is width zero, which is very strange.

Comment 4

[Ralf Vitasek]

so far i found out that this bug happens when _all_ of the following "requirements" are met:

-> a table cell only has content thats using position:relative
-> the table has more than 1 cell
-> the cell has no width set
-> the cell has 0 padding
-> the table is rendered table-layout:auto (default)
-> the relative positioned content has 0 padding and margin

Comment 5

[Ralf Vitasek]

works fine in current 3.6
so closing this old bug.