Closed
Bug 1112750
Opened 10 years ago
Closed 10 years ago
display: table-cell with position: relative and top: Xpx DIFFERENT from WebKit
Categories
(Core :: Layout: Tables, defect)
Tracking
()
People
(Reporter: jon.dufresne, Unassigned)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:34.0) Gecko/20100101 Firefox/34.0 Build ID: 20141201111703 Steps to reproduce: 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. I also filed a bug with WebKit: <https://bugs.webkit.org/show_bug.cgi?id=139742> 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. Could be related to bug 981950 which has linked to a Chrome bug <https://code.google.com/p/chromium/issues/detail?id=352144>. 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>
Comment 3•10 years ago
|
||
> table-cell display to override the relative positioning
Display and relative positioning are completely unrelated. All relative positioning does is shift the box over once you're done with layout, and this can be done for any display type.
WebKit's rendering here is correct.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•