301339 - incorrectly iterperets parent for use in position: absolute;

Status: RESOLVED WORKSFORME

(Firefox :: General, defect)

Description

[merlin903]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.9) Gecko/20050711 Firefox/1.0.5
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.9) Gecko/20050711 Firefox/1.0.5

The page at http://www.wolfsreign.com/mozilla/testcase/testcase.htm utilizes an
absolutely positioned div #calendar, with an absolutely positioned table to
place the table in a specific portion of the div. Inside the table there are
divs that are hidden until the td is hovered. Upon hover on the td, the divs
should display, using a position: absolute so as to not cause the table to expand.

Reproducible: Always

Steps to Reproduce:
1. Create a div
2. Create a table inside the div
3. Create divs inside each td
4. Using CSS position the parent div absolutely
5. Using CSS position the table absolutely
6. Using CSS position the child divs absolutely with a top: 0; left: 0;

Actual Results:  
The child divs inside the table are rendered outside of the table and relative
to the parent div.

Expected Results:  
Using a top: 0; and left: 0;, the divs should be positioned in relation to the
table, but are instead positioned in relation to the #calendar div.

 Safari, and IE6 SP2 (with the IE7 javascript library not included on the
testcase) render the page correctly.

Comment 1

[dan]

This happens on the PC also.  I have a table containing spans with position
absolutes on them.  The spans are showing relative to the page instead of
relative to the table.  IE6 works "correctly".  Microsoft's doc:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/position.asp
For IE I did have to specify a non-zero offset relative position for the parent
table.

Comment 2

[Yehuda Katz]

This happens to me also. I have resolved it by giving the absolutely positioned div a height, but this prevents me from having the height of the div in question expand or contract with the text inside. As a result, those increasing the size of the font on the page will see the text cut off (it's a problem even when I use ems, because I have a fixed width, and the text grows to additional lines as the user's font-size is increased).

Comment 3

[Big John]

My tests show that Firefox not only fails to make the table a base for the absolute child, but it fails to support relative positioning at all. Opera 9 and Safari 3 at least allow it on the table element, and IE fully supports relative and absolute positioning on TD's back to IE5/win.

The specs say all elements are positionable except possibly for certain advanced table elements that remain undefined.

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Clearly Firefox ought to be supporting relative positioning at least on tables to catch up with Op and Safari. Even better would be to try and match what IE has been doing for almost a decade now.

Comment 4

[Daniel.S]

The testcase is no longer available, so I can't comment on it.

However, it's true that Firefox has some problems with tables and more complex CSS. There are bugs for these issuas, though.

On the other hand, it can be said, that tables and absolute positioning also seem to be too complex to be used for most situations.