Firefox and IE 3

ca8msm · Oct 3, 2005

I have started to make a test page using CSS which just contains the basic layout of how I want to position certain sections in a web page.

I have basically made all of the content align to the center of the page but I've also used a background image for reasons that I need later on in the project but hopefully aren't particulary relevant to this problem (although I did ask about it in thread215-1125127 if anyone wonders why I've done it like this).

You can see the results of what I have done at

http://ca8msm.homeip.net/css/testpage.htm

or I can paste the HTML and CSS code here if necessary.

If you view the site through IE, it displays as I want it do in that the text aligns itself to the center of the page and on top of the white background. However, this isn't the case if you view the page through Firefox and the text simply aligns to the very left of the page.

I had incorrectly assumed that both browsers would show the same results although I'm guessing that this is probably an IE quirk and Firefox shows it how it should be displayed albeit not how I actually wanted it to show!

So, my questions are:

1) Why does it align differently?
2) How should I have done it in the first place?

Thanks,
Mark

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

tgreer · Oct 3, 2005

For starters, you have an incomplete doctype. Fix that first, then see where you stand.

Thomas D. Greer

http://www.tgreer.com

ca8msm · Oct 3, 2005

Sorry about that - I was trying to get a workable example that only included the bits that you needed to see and have cut too much out. I've now put the HTML 4.01 strict DOCTYPE back in.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

Vragabond · Oct 3, 2005

Your problem is minimal and very basic. As the name says, text-align aligns text (and other inline elements), not block level elements. Divs are blocks and as such not aligned to the center -- except in IE, which incorrectly applies that rule.

CSS states that block level element is centered if its left and right margins are set to auto, which means that they proportionally fill all empty space that exists between the element width and its parent's width. To do that, simply add this attribute to your #container:

Code:

#container {
 ...
 margin: 0 auto;
}

ca8msm · Oct 3, 2005

Thanks for the explanation - I was guessing that it was IE that was displaying it incorrectly - I just couldn't work out why. I think I'll have to start testing with Firefox first rather than the other way around.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

ChrisHunt · Oct 4, 2005

Here's the tried and true way to get a <div> horizontally centered (assuming div#container sits directly under <body>)...

Code:

body {
   text-align: center;  /* aligns div on old IE versions */
}

#container {
   margin: 0 auto;   /* aligns div on modern browsers */
   text-align: left; /* undo old IE fix */

If you don't care about IE5.x you can leave this out and just go with [tt]margin: 0 auto;[/tt], since IE6 will understand it.

Personally, I'm not going out of my way to support ancient browsers on my sites, but the above is not too much hassle so I generally do it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ca8msm · Oct 4, 2005

Thanks Chris

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Firefox and IE 3

ca8msm

Programmer

tgreer

Programmer

ca8msm

Programmer

Vragabond

Programmer

ca8msm

Programmer

ChrisHunt

Programmer

ca8msm

Programmer

Similar threads

Part and Inventory Search

Sponsor