6 replies [Last post]
Jonahx
Offline
Regular
Last seen: 11 years 33 weeks ago
Joined: 2007-12-20
Posts: 39
Points: 0

If you have a div containing a table, and you want to center the table, and you want it to work in both IE and FF, you have to use ugly -moz-center hack. Is there a better way? And why does this even exist? Why does FF not support normal center in this case. Example code below. -moz-center needed for FF, line below it needed for IE:

Two Column Liquid Layout

#center-test {
text-align:-moz-center;
#text-align:center;
}




cell 1


Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 33 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Jonahx wrote:If you have a

Jonahx wrote:
If you have a div containing a table, and you want to center the table, and you want it to work in both IE and FF, you have to use ugly -moz-center hack.

Says who? Just give the table a width and margin: 0 auto.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jonahx
Offline
Regular
Last seen: 11 years 33 weeks ago
Joined: 2007-12-20
Posts: 39
Points: 0

Tyssen wrote:Jonahx wrote:If

Tyssen wrote:
Jonahx wrote:
If you have a div containing a table, and you want to center the table, and you want it to work in both IE and FF, you have to use ugly -moz-center hack.

Says who? Just give the table a width and margin: 0 auto.

Cool that is certainly better. Technically though, why do you need to do that? Why doesn't it work without that and a normal "text-align:center"?

Thanks,
Jonah

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 10 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

Because text-align applies

Because text-align applies to, um, text? Actually, inline data. Are you running in quirks mode? IE6+ in standards mode treats text-align correctly.

Many of the -moz- proprietary properties are meant for internal use. For example, in the default html stylesheet;

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

The -moz-padding-start is a shorthand for pad left if text is ltr, and pad right if text is rtl.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 10 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

Tyssen wrote:Jonahx wrote:If

Tyssen wrote:
Jonahx wrote:
If you have a div containing a table, and you want to center the table, and you want it to work in both IE and FF, you have to use ugly -moz-center hack.

Says who? Just give the table a width and margin: 0 auto.

You don't even have to give the table an explicit width. Tables shrink-wrap their content, so have an implicit width.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jonahx
Offline
Regular
Last seen: 11 years 33 weeks ago
Joined: 2007-12-20
Posts: 39
Points: 0

Thanks Gary. Makes sense.

Thanks Gary. Makes sense.

EDIT: Oh one more question. If you do margin: auto auto, why does it not center vertically as well as horizontally?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 10 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

I don't know. I've read

I don't know. I've read some technical explanations of why vertical auto margin isn't feasible, but don't remember any details. I just accept it doesn't work that way.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.