Posted by Spartanicus on 10/07/75 11:54

vanbc <van@bc.com> wrote:

>I have 4 tables that need to be on a single row and centered on the
>page. The easiest way I've done it is to nest the 4 tables in a table.
>
>Would anyone know how do this without nesting as some validators
>won't pass it.
>
>using "float: left;" will push all the tables to the left, but i want
>it centered. Anyone have any suggestions?

The correct way to do this is by setting "display:inline-table" and then
"text-align:center" on the containing block element. Alas the CSS2
"inline-table" value is not supported by Mozilla or IE.

You can feed IE an "inline" value instead, IE being the badly broken
thing it is will effectively treat "inline" as "inline-table".

You can also feed Mozilla a "inline" value instead, on occasion this may
appear to result in the desired behaviour, but the snags are:

1) Mozilla will no longer accept a specified width on the table
2) A border around the table itself will collapse to the applicable
line-height (regardless of the table's content)
3) Attempting to set vertical alignment triggers a long standing Mozilla
bug that causes the tables to be displayed on top of the preceding block
level content, and the vertical alignment doesn't work in Mozilla.

http://homepage.ntlworld.ie/spartanicus/inline_tables.htm

--
Spartanicus

• Next in forum: float problem in Firefox
• Prev in forum: Re: Html injection/hacking, but what does it do? Any advice?
• Thread view: Re: How do you center several tables side by side on a single row?

[Reply to this message]