The most annoying thing for a web designer is definitely the large difference between the two biggest browsers, Internet Explorer and FireFox. Simply adding text-align: center; to your bodys style tag centers a **** in Internet Explorer, but not in FireFox. This is not a bad thing for firefox as it was not added for a reason and thats because when adding text-align to your body tag, you are aligning cells and tables, not text so therefore Mozilla FireFox is right in a way.
There is a VERY easy solution to this problem, however it is not compliable with W3C CSS standards. Simply doing this will center your page in IE and FF:
Code: Select all
body /* IE */
{
text-align: center;
}
body /* FF */
{
text-align: -moz-center;
}
Simple and does work, but it is not valid W3C HTML, which every website should be.
The Solution
There are absolutely no clear solutions on the internet, they are all very confusing and do not make sense at times, so I will try my best to explain.
Ok lets create a simple website first and put a table block in the center.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moo</title>
</head>
<body>
<table border="1" width="267" height="202">
<tr>
<td height="202" width="267">Hello World!</td>
</tr>
</table>
</body>
</html>
Ok, I am going to use internal CSS so I don't lose you.
Ok to center a table in both FF and IE you need to add the following to your table tag.
Code:
<table style="" border="1" width="267" height="202">
We have now added a style tag, this is what internal CSS is and you can use external CSS, which I recommended.
Ok now that you have added the style tag, you can now add the vital CSS in order for it to work.
To get it to work you need to take the width of your table, put it in the CSS style area and make both right and left margins auto, you also need to add a style tag to your body area with text-align in there, this is to satify IE.
Heres the final code (don't forget to add your doctype to every page you make Smile)
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moo</title>
</head>
<body style="text-align: center;">
<table style="width: 267px; height: 202px; margin-left: auto; margin-right: auto; border: 1;">
<tr>
<td height="202" width="267">Hello World!</td>
</tr>
</table>
</body>
</html>
Try it...