Hi All, I am checking my website with safari, but I can't in any way center a table (the whole table) within a div that is positioned absolutely. This is really irritating, because I can't find a good work arround. The code is like this (I am using strict XHTML): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="Expires" content="0"/> <meta http-equiv="Pragma" content="no-cache"/> <title>SHODKA TEST</title> </head> <body> <h4>Test A</h4> <div style="text-align: left; position: absolute; left: 0px; top: 100px"> <table style="margin-left: auto; margin-right: auto"> <tr><th>c</th></tr> <tr><td>c</td></tr> <tr><td>xxxxxxx</td></tr> </table> </div> </body> </html> Regards Lucas. Let me know if there is a workaround.
In this case, it shouldn't matter (as this sounds like a RenderLayer issue), but are you serving this page as text/xml or as text/html? If you're serving it as html, you'll go through the HTML parser, even though your document is conformant XHTML 1.0. You can find out which, by pointing http://web-sniffer.net/ at your site, or using "curl -I <your url>" Either will tell you how your server is vending the content. FYI, it's also best to attach the test cases as files (instead of comments) in the future. doing so now.
Created attachment 5313 [details] Test case as attachement
It's not clear to me from the test case what we're suposed to be seeing. but comparing with firefox, it appears our behavior is wrong in this regard. I bet we already have a bug tracking this somewhere.
If you remove the 'div', then Safari will center the table. There are in principle two ways to center a table: - Set text-align to 'center'. This is the old way. - According to CSS it should be as in the test case. Setting margin-left and margin-right to 'auto'. Anyway, I spend a whole evening to get it centered within a div that has an absolute positioning. But Safari wouldn't listen to me: I tried: - Setting text-align in the 'div' on 'center'. - Using '<center>' tag. - Using align='center' - Using an additional div - Using an additional div with fixed width. - Using content on text/html and text/xml (as suggested in the comments). - Using a table within a table. It won't work. Safari can't center a table within a div that has position on absolute. Therefor, I consider this is bug rather sever.
Created attachment 5333 [details] Testcase What happens here, is that when firefox has a table within a <div> it automatically adjusts the div's width to 100%, even if the table has no width of it's own.
The behavior for the testcase is the same for both firefox and ie.mac. I personally do not agree that this is a bug, i think firefox and ie render it wrong. I may be wrong ofcourse :). The fix is shown in the testcase though, so reporter: add width:100% to the containg div and you should be ok.
Created attachment 5334 [details] Testcase
I do not agree with the comments of Joost. Although, I got one situation where I could get a table centered within a div with position on 'absolute', I don't get it in all situations. I think there is a rule of thumb: - Where you can center text, it should be possible to center a table. This is certainly NOT the case. Safari is very, very persistent in not centering the table.
This seems to be harder than i thought. But, as well it is a dupe, namely of 4860. Marking it as such. *** This bug has been marked as a duplicate of 4860 ***