This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 18284 - Flexbox ED Example Rendering of "Example 1" (computer starter kit) is broken in firefox due to reliance on explicitly-undefined-in-CSS behavior
Summary: Flexbox ED Example Rendering of "Example 1" (computer starter kit) is broken ...
Status: RESOLVED FIXED
Alias: None
Product: CSS
Classification: Unclassified
Component: Flexbox (show other bugs)
Version: unspecified
Hardware: PC Linux
: P2 normal
Target Milestone: ---
Assignee: Tab Atkins Jr.
QA Contact: public-css-bugzilla
URL: http://dev.w3.org/csswg/css3-flexbox/
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-07-18 17:57 UTC by Daniel Holbert
Modified: 2012-07-19 18:34 UTC (History)
4 users (show)

See Also:


Attachments
screenshot in chrome (indended rendering) (67.82 KB, image/png)
2012-07-18 18:03 UTC, Daniel Holbert
Details
screenshot in firefox (73.54 KB, image/png)
2012-07-18 18:03 UTC, Daniel Holbert
Details

Description Daniel Holbert 2012-07-18 17:57:17 UTC
The Flexbox ED's "Example 1" sample-rendering doesn't display correctly in Firefox right now -- its two "BUY NOW" buttons render to the left of their containers, and the two buttons are stacked directly on top of each other. (so it looks like there's only one button)

The buttons are absolutely-positioned, and the intended containing block is a "display:table-cell; position:relative" element (with class=computer-example). However, Firefox doesn't honor "position:relative" on table-cells -- so the container doesn't actually form an abspos containing block.

This is tracked in Mozilla's bug-tracker at https://bugzilla.mozilla.org/show_bug.cgi?id=35168 -- as noted in a comment there, the CSS2.1 Spec explicitly leaves this behavior undefined:
"The effect of 'position:relative' on table-row-group, table-header-group,
table-footer-group, table-row, table-column-group, table-column, table-cell,
and table-caption elements is undefined."
http://www.w3.org/TR/2006/WD-CSS21-20060411/visuren.html#choose-position

So this sample-rendering is relying on explicitly-undefined-in-CSS behavior.

If the sample-rendering could be fixed to not rely on this undefined behavior (e.g. by adding a "display:block; position:relative" wrapper inside of the table-cell), that would be awesome.
Comment 1 Daniel Holbert 2012-07-18 18:03:38 UTC
Created attachment 1160 [details]
screenshot in chrome (indended rendering)
Comment 2 Daniel Holbert 2012-07-18 18:03:55 UTC
Created attachment 1161 [details]
screenshot in firefox
Comment 3 Tab Atkins Jr. 2012-07-19 18:34:21 UTC
Looks like fantasai fixed this by torturing the markup even further.