text-align bug in FireFox 1.5

19 Jul

While I am rendering a CSS theme for my webapp, I see this problem:

.container{
text-align: center;
border: solid 1px blue;
}
<div class=container><table><tr><td>Text</td></tr></table><div>

In theory, we will have a center-aligned table, and it worked in IE6, but not in Firefox 1.5. If I add align into the div tag, it worked in both. After struggling with a sea of CSS references, trying to find out some other way to work arround this bug, I finally found this:

http://geekswithblogs.net/timh/archive/2006/04/19/75606.aspx

So this is my solution:
.container{
text-align: center;
border: solid 1px blue;
}

.container{
text-align:-moz-center;
}

Just place those lines into your CSS, the browser will automatically choose the best. Note: never place 2 text-align in 1 block.

Similarly, if you want to right-align the table box, use -moz-right.

Another trick to center the table:

.container{
text-align: center;
border: solid 1px blue;
}
.container table{
margin:0px auto;
}

I don’t find any other trick for right-aligning.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: