Topic: Mozilla centered table annoyances (Page 1 of 1)

OK... i have a table...

<table border="0" cellpadding="10" cellspacing="0" width="750" class="maintable">
...
</table>

with this style sheet applied to it:

TABLE.maintable {
width:750px;
margin:0px;
}

It is contained directly inside the body tags, which have this style:

BODY {
background:#036;
text-align:center;
}

But the table is not centered on the page. One thing I tried was adding align="center" to the table tag. But this only worked if I removed class="maintable" at the same time.

The only way I can find to do it is with <center></center>... is there another way? (How come the body's text-align:center; doesn't work, it works in IE...)

Couple of things to think about there.

First, you might want to change the class from TABLE.maintable to simply .maintable or #maintable (class & id respectively).

Aside from that, we have lots of centering issues when dealing with browsers, for some reason or t'other.

You'll note that I currently have a div that is centering at http://th-inknet.com if you'd like to rip that source. One of the important factors there is setting your margin : auto somewhere in the definition of your box.

And, of course, you might run into another issue with using tables and positioning in CSS together; the box model.

You've got your table defined with cellpadding of 0. IE renders padding inside of the model. w3C recommends the padding to be added to the proportions of the box--i.e., a box of 200px with a padding of 10px all round becomes a 220px box.

But we knew that already.

IE fudges up a couple of things, one of which is the allowing for leniancy in centering.

Your last ditch effort is to use <div align="center"></div> instead of the deprecated <center></center>. Keeps your in touch with your urban roots... or some such nonsense.

Follow? Or am I convoluted.