| Summary: | display: table-cell with position: relative and top: Xpx DIFFERENT from Firefox | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Jon Dufresne <jon.dufresne> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED INVALID | ||||||||
| Severity: | Normal | ||||||||
| Priority: | P2 | ||||||||
| Version: | 528+ (Nightly build) | ||||||||
| Hardware: | Unspecified | ||||||||
| OS: | Unspecified | ||||||||
| Attachments: |
|
||||||||
Created attachment 243453 [details]
Screenshot in WebKit
Created attachment 243454 [details]
Screenshot in Firefox
According to the Firefox guys, WebKit is correct, Firefox is incorrect. <https://bugzilla.mozilla.org/show_bug.cgi?id=1112750> <https://bugzilla.mozilla.org/show_bug.cgi?id=35168> |
I'm not sure which rendering is technically correct based on the spec. But I ran into this issue while developing and noticed a difference between Firefox and WebKit. The results from WebKit surprised me the most and is why I'm reporting this here. If this is actually a Firefox bug, please let me know and I will file the bug in the appropriate place. When an element has the CSS: display: table-cell; position: relative; top: Xpx; Where X is some value greater than 0, the element is renderd X pixels from the top. I am surprised by this as I would expect (intuitively; not based on a spec) table-cell display to override the relative positioning. That is, I'd expect the element to be rendered more like a table cell. Test document: <!doctype HTML> <head> <title>Test</title> <style> #row { display: table; } .cell { display: table-cell; position: relative; height: 100px; width: 100px; } #left { background-color: green; top: 50px; } #right { background-color: red; } </style> </head> <body> <div id="row"> <div id="left" class="cell"></div> <div id="right" class="cell"></div> </div> </body>