9 replies [Last post]
onefootswill
Offline
newbie
Last seen: 11 years 17 weeks ago
Timezone: GMT+9.5
Joined: 2004-09-02
Posts: 8
Points: 3

Hi all,

I think this will be a pretty easy query to sort out.

I want to center the main "container" div without using a <center> tag. It has worked in Firefox and Netscape, but does not work in IE.

The page I am working on is at http://home.aanet.com.au/getadog/index.html.

The css is as follows:

Quote:
body {
background: #934567;
padding: 0px;
margin: 0px;
color: #000;
font: 84% arial, helvetica, sans-serif;
}
a {
color: #F30;
}
a:visited {
color: #FFDD78;
}
a:hover {
color: #096;
}
div#wrapper {
background: #FFF;
width: 800px;
margin: 0px auto;
padding: 0px;
border-top: 8px solid #669;
border-left: 8px solid #669;
border-right: 8px solid #669;
}
div#footer {
background: #717F51;
width: 800px;
margin: 0px auto;
padding: 0px 0px 5px 0px;
position: relative;
border-top: 8px solid #669;
border-left: 8px solid #669;
border-right: 8px solid #669;
clear: both;
}
div.header {
background: #036;
width: 100%;
height: 100px;
}

Can anyone please let me know what I am missing.

Thanks

Dave

loudsox04
Offline
Regular
Boston, MA
Last seen: 17 years 11 weeks ago
Boston, MA
Timezone: GMT-4
Joined: 2004-07-06
Posts: 33
Points: 0

Centers in Firefox, but not IE

Yup.. IE's funky that way. My recommendation: Add another div that will contain #wrapper with text-align:center. This would be in addition to the auto margins you've set for #wrapper. Good luck! - Jen

onefootswill
Offline
newbie
Last seen: 11 years 17 weeks ago
Timezone: GMT+9.5
Joined: 2004-09-02
Posts: 8
Points: 3

Centers in Firefox, but not IE

Thanks for the suggestion Jen.

But I don't want to approach it in that way as it is almost the same as using a <center> tag.

I know there is another solution, as I've seen other sites achieve my goal without using any centering code.

Does anyone know what I'm getting at?

loudsox04
Offline
Regular
Boston, MA
Last seen: 17 years 11 weeks ago
Boston, MA
Timezone: GMT-4
Joined: 2004-07-06
Posts: 33
Points: 0

Centers in Firefox, but not IE

bump

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Centers in Firefox, but not IE

Hi onefootswill,
For IE you will have to use text-align:center, you can apply it to the body.

Hope that helps

onefootswill
Offline
newbie
Last seen: 11 years 17 weeks ago
Timezone: GMT+9.5
Joined: 2004-09-02
Posts: 8
Points: 3

Centers in Firefox, but not IE

Hi Tony,

Thanks for the suggestion, but again, I know this can be done without having to use a centering line of code.

An example of a page that does it is - http://www.littleyellowdifferent.com/

I want the browser to automatically determine the left margin, but at the same time center it. There's got to be something I'm missing.

Regards
onefootswill

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 35 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Centers in Firefox, but not IE

IE6 understands the margin-left:auto; and margin-right:auto; so the site you gave will be correctly centered in IE6.
However earlier versions of IE will not show this site centered but left aligned instead.

To make sure that the site is centered in all versions of IE you will need to use text-align:center;

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Centers in Firefox, but not IE

Having aligned center you will then need to realign the text left in the container, this is of course the method employed for aligning in IE5
as it doesn't understand auto.
I think the problem your encountering is the fact that you have no Document Type Declaration at the start of the page this is putting IE6 into quirks mode so it too is failing to understand, so please please use a DTD.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Root
Offline
Enthusiast
Brighton UK
Last seen: 14 years 32 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Centers in Firefox, but not IE

Tantek currently advocates itemising the margins individually margin-left, margin-right etc to give legacy browser stability. Plus you will need the text-align: center already suggested. It is important to reset the text in the next descendant container with text-align: left to counteract it. Just my 2c.

No class, little style and a lotta division.

onefootswill
Offline
newbie
Last seen: 11 years 17 weeks ago
Timezone: GMT+9.5
Joined: 2004-09-02
Posts: 8
Points: 3

Centers in Firefox, but not IE

Thanks very much guys. I did not know about the necessity of a Document Type Declaration.

I am also now happy to accept that using "text:align center" is also the way forward to take account of older browsers, counteracted with a left tag in the next container.

Thanks to everyone who responded to my query.