Firefox and text-align center

| | Comments (0) | TrackBacks (0)
Have you ever been developing a website and it looks fine and centered in Internet Explorer but in Mozilla it aligns hard left? We were developing an in-house template system to make site creation a snap. We built the test pages and got the stylesheets all lined out only to find the pages all hard left in our firefox browsers. Not good. This would be a little hard to offer as a commercial product and still reasonably remain afloat. Our stylesheet had this tag/attribute:

body {
text-align:center;
}

The expected result was to shift everything to center. Text-align: center works well in IE but not in firefox. Dabbling around with the templates, we found an added "<center></center>" tag would render the text and pictures in the middle just like the text-align: center was already doing in Internet Explorer.  The problem was we needed to add the tags before and after each section in our templates. That meant before and after the header, main, and footer. Also If we set our <DocTypes in all our templates and only had 1 template per page we could do it but the point in a template is to organize the structure of the code.

Templates make it easy to change all the headers at the same time like adjusting the buttons on the navigation bar or changing the header background. We built a 3 template system which included a header, main content, and footer. When we separated our headers from the main body the mozilla hard left problem manifested itself with a vengeance. The only known fix was to put the <center></center> tags at the beginning and ending of each tier in our templates. This produced xhtml non-compliant code with generated pages looking like this:

<center>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:mt="http://www.sixapart.com/ns/mt">
<head>
<title>this is a test</title>
</head>
</center>
<center>
<body>
~~
</body>
</center>
<center>
<p> footer info </>
</html>
</center>

Don't code like this. It kinda works but is so very non compliant we almost didn't include it here as our example. Templates help you cookie cut basic layouts so the hard part of adding content can be more dynamic and changeable without reloading a huge static html file. Building a cookie cutter which generates abnormal html code is not elegant or excellent. Coders should code out problems not make functions which make more problems.

The Fix:

So our lead developer did what any serious programmer does to fix abnormalities  in browsers. He turned to Google. Amazing how someone else had the same problem and it was fixed with a simple command.

text-align: -moz-center; /* this fixes the bug in firefox which pays no attention to text-align center */

The other website developer stated he didn't know why mozilla needed their own center code and assumed it was because mozilla developers realized their browser didn't parse the center command very well so instead of fixing it, for some reason, they just created their own tag. Whatever the reason we were just pleased to add the new attribute to our body tag and keep moving. However this made IE slam hard left. Reading further revealed the proper fix for both IE and Firefox.We decided to put both the body tags in our Cascading Style Sheet. Example:

body /* Internet Explorer */
{
/* this centers the page in IE browsers.  */
text-align: center;
}

body /* Mozilla Firefox alignment */
{
/* this fixes the bug in firefox which pays no attention to text-align center */
text-align: -moz-center;
}


http://box201.com has an example of this in production. On the main home page take a look at the stylesheet and you will see both text-align:center; text-align: -moz-center; in the body tag. That single command helped enormously. Preventing all kinds of "jumps through hoops" to code around mozilla browsers. Let us know if this is as helpful to you too.

Keep in the code,

Box201 Developers...

0 TrackBacks

Listed below are links to blogs that reference this entry: Firefox and text-align center.

TrackBack URL for this entry: http://www.box201.com/cgi-bin/mt/mt-tb.cgi/4

Leave a comment

About this Entry

This page contains a single entry by Agrapha published on September 13, 2008 5:11 PM.

freelance php development was the previous entry in this blog.

MySql id reSequence procedure for innodb is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.