- From: Boris Zbarsky <bzbarsky@MIT.EDU>
- Date: Mon, 09 Mar 2009 21:55:35 -0400
- To: Brad Kemper <brad.kemper@gmail.com>
- CC: www-style list <www-style@w3.org>
Brad Kemper wrote: > Actually, if I wrap those three DIVs in another one that has 'display: > table row;' then I get what I described in Safari 3, which is plenty > good enough with me, and I can see that without that it is two tables, > not just two rows. True. In Safari 3, Webkit trunk, Gecko, and Opera 9.6 this markup: <div style="display: table-row"> <div style="display: table-cell">A</div> <div style="position: absolute">B</div> <div style="display: table-cell">C</div> </div> gives a single table row containing A and C. However that row has 3 cells, and the A and C are in the first and third cells respectively. Testcase: <!DOCTYPE html> <body> <div style="display: table-row"> <div style="display: table-cell">A</div> <div style="position: absolute; left: 10em">B</div> <div style="display: table-cell">C</div> </div> <div style="display: table-row"> <div style="display: table-cell">Long</div> <div style="display: table-cell">Long</div> <div style="display: table-cell">Long</div> </div> </body> > But in Firefox 3 it moves down a line (under the table), like this: > > AC > B Yeah, I'm not quite sure what's up there, but it's a matter of deciding on the static position of an absolutely positioned box. You can see the same behavior with: <!DOCTYPE html> <body> <table cellpadding="0" cellspacing="0"> <tr> <td>A</td> <td><div style="position: absolute; left: 3em">B</div></td> <td>C</td> </tr> </table> </body> in Firefox and Opera. On _that_ testcase, Safari agrees with them. I'm not sure what leads to the behavior difference in Safari between this testcase and the previous one. In Gecko the boxes created by the two testcases (the one with the <table> and my original testcase with two cells and an abs pos div between them) are exactly the same. -Boris
Received on Tuesday, 10 March 2009 01:56:21 UTC