Bug 6262

Summary:

Centering table within a absolute positioned div does not work

Product:

WebKit

Reporter:

Lucas Kruijswijk <L.B.Kruijswijk>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Major

Keywords:

HasReduction

Priority:

Version:

420+

Hardware:

Mac

OS:

OS X 10.4

Attachments:

Description	Flags
Test case as attachement	none
Testcase	none
Testcase	none

Lucas Kruijswijk

Reported 2005-12-27 14:45:36 PST

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.

Attachments
Test case as attachement (609 bytes, application/xhtml+xml) 2005-12-27 14:53 PST, Eric Seidel (no email)	no flags	Details
Testcase (636 bytes, text/html) 2005-12-28 03:35 PST, Joost de Valk (AlthA)	no flags	Details
Testcase (596 bytes, text/html) 2005-12-28 03:40 PST, Joost de Valk (AlthA)	no flags	Details
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Eric Seidel (no email)

Comment 1 2005-12-27 14:53:00 PST

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.

Eric Seidel (no email)

Comment 2 2005-12-27 14:53:50 PST

Created attachment 5313 [details] Test case as attachement

Eric Seidel (no email)

Comment 3 2005-12-27 14:55:07 PST

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.

Lucas Kruijswijk

Comment 4 2005-12-27 15:27:29 PST

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.

Joost de Valk (AlthA)

Comment 5 2005-12-28 03:35:40 PST

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.

Joost de Valk (AlthA)

Comment 6 2005-12-28 03:40:07 PST

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.

Joost de Valk (AlthA)

Comment 7 2005-12-28 03:40:44 PST

Created attachment 5334 [details] Testcase

Lucas Kruijswijk

Comment 8 2005-12-28 05:17:09 PST

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.

Joost de Valk (AlthA)

Comment 9 2005-12-28 07:07:23 PST

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 ***

Note You need to log in before you can comment on or make changes to this bug.