139742 2014-12-17 12:43:08 -0800 display: table-cell with position: relative and top: Xpx DIFFERENT from Firefox 2014-12-17 17:14:47 -0800 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Unspecified Unspecified RESOLVED INVALID P2 Normal --- 1 jon.dufresne webkit-unassigned oldest_to_newest 1056505 0 jon.dufresne 2014-12-17 12:43:08 -0800 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> 1056506 1 243453 jon.dufresne 2014-12-17 12:43:38 -0800 Created attachment 243453 Screenshot in WebKit 1056507 2 243454 jon.dufresne 2014-12-17 12:43:54 -0800 Created attachment 243454 Screenshot in Firefox 1056639 3 jon.dufresne 2014-12-17 17:14:47 -0800 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> 243453 2014-12-17 12:43:38 -0800 2014-12-17 12:43:38 -0800 Screenshot in WebKit webkit.png image/png 660 jon.dufresne iVBORw0KGgoAAAANSUhEUgAAAT0AAADaCAIAAABbzwJEAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA B3RJTUUH3gwRFCsZwIFUAQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUH AAACCklEQVR42u3awQmAMBBEUVfSuIVpR6lhLEAE0YAE3rvmNvBZD1bvfQGmspoAptP2/bACzKWS WAF8JwO6BXQLugV0C+gWdAv8r5lggCobPOV/AfcWdAvoFtAtoFvQLaBbQLegW0C3gG5Bt4BuAd2C bgHdAroF3QK6BXQL6BZ0C+gW0C3oFtAtoFvQLaBbQLegW0C3gG4B3YJuAd0CugXdAroFdAu6BXQL 6BZ0C+gW0C2gW9AtoFvgqt091FbWeSgmwL0FdAu6BXQL6BZ0C+gW0C3oFtAtoFtAt6BbQLeAbkG3 gG4B3YJuAd0CugXdAroFdAu6BXQL6BbQLegW0C2gW9AtoFtAt6BbQLeAbkG3gG4B3QK6Bd0CugV0 C7oFdAvoFnQL6Bb4oplggMQGuLeAbkG3gG4B3YJuAd0CugXdAroFdAvoFnQL6BbQLegW0C2gW9At oFtAt6BbQLeAbkG3gG4B3QK6Bd0CugV0C7oFdAvoFnQL6BbQLegW0C2gW0C3oFtAt4BuQbeAbgHd gm4B3QLvVRIrgHsL6BbQLegW0C2gW9AtoFtAt6BbQLeAbkG3gG4B3QK6Bd0CugV0C7oFdAvoFnQL 6BbQLegW0C2gW9AtoFtAt4BuQbeAbgHdgm4B3QK6Bd0CugV0C7oFdAvoFtAt6BbQLaBb0C2gW0C3 oFtAt4BuQbeAboHRTjedEjOT9QbqAAAAAElFTkSuQmCC 243454 2014-12-17 12:43:54 -0800 2014-12-17 12:43:54 -0800 Screenshot in Firefox firefox.png image/png 535 jon.dufresne iVBORw0KGgoAAAANSUhEUgAAARYAAACrCAIAAAAsDCQHAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA B3RJTUUH3gwRFCszGzqd1wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUH AAABjUlEQVR42u3WsQ2AMAxFwRgxgSeGgT1DUoXadEjcdZFSfekpiaoaW2YO4I3DBCAhkBBICH7o 7FyKOyzVNC8b9MeaXiHwkQMkBBICCYGEAAmBhEBCICFAQiAhkBBICJAQSAgkBBICJAQSAgmBhEBC gIRAQiAhkBAgIZAQSAgkBEgIJAQSAgkBEgIJgYRAQiAhQEIgIZAQSAiQEEgIJAQSAiQEEgIJgYQA CYGEQEIgIZCQCUBCICGQEEgIkBBICCQEEgIkBBICCYGEAAmBhEBCICFAQiAhkBBICCQESAgkBBIC CQESAgmBhEBCgIRAQiAhkBAgIZAQSAgkBBICJAQSAgmBhIC+qKrnkJkWAa8QSAgkBBICJAQSAgmB hAAJgYRAQiAhQEIgIZAQSAgkBEgIJAQSAgkBEgIJgYRAQoCEQEIgIZAQICGQEEgIJAQSAiQEEgIJ gYQACYGEQEIgIUBCICGQEEgIkBBICCQEEgIJmQAkBBICCYGEAAmBhEBCICFAQiAhkBBICJAQSAi+ ZAH2DgtRw99vUgAAAABJRU5ErkJggg==