Being a professional Website and Web-application developer, I always get quite frustrated when it comes time to ensuring that the site displays exactly the same in all the mainstream (and sometimes not so mainstream) browsers in order to ensure that the users experience with the site is the same.

I have always thought that Firefox was far superior to I.E. (Internet Explorer), now before I start getting flamed just carry on reading, anyway ... I have always bemoaned I.E. and complained about the makers of it and why they couldn't follow simple standards. I was so wrong.

So while working on my new site for Gobbo Games, my Independant Game Developer company, I came across an interesting quirk in Firefox, and for once I.E. worked exactly like it is suppossed to.

I decided to make my new site for Gobbo Games 100% CSS and XHTML compliant, which I normally always try to do with all my sites but normally always have to compromise slightly in order to achieve what the customer wants ... this time I was the customer and I wasn't going to compromise.

For some unkown reason the main DIV tag (which has the correct CSS tags) always remains left aligned in Firefox but yet displays in the Center in I.E. Eventually I put a DIV inside a DIV and used the good old trusty ALIGN property ... BAD ... that broke the validators.

Feeling very frustrated and slightly annoyed, I decided to Google and came across this little gem:

For center align in I.E.:

For center align in F.F.:

And viola ... 100% XHTML that actually displays properly in all the browsers. Although it is not considered 100% valid CSS ... I am still working on fixing this to make it 100% CSS compliant.

Now the question I have is: Why is there a special tag for Firefox?

Probably a question I will never be able to answer ... but the next time I am bemoaing the lack of standards in certain browsers ... I am gonna use the CSS and XHTML validators and then start complaining. :)

At the time of writing this I am using Internet Explorer v7.0.5730.13 and Firefox v3.0.3