HTML Forum

**Silent77** · 05-26-2006, 09:32 PM

Ok so I thought I had this issue fixed, but when I load my website in IE it does not center the page like it does in FF. I was wondering if it is my CSS code or what.

Link to site: http://silent.2dollarhost.net

CSS for centering

Code:

div#rel {position:relative; width:678px; height:500px; margin:1px auto; background:#FFFFFF}

Thanks.

**xplicit** · 05-27-2006, 07:23 AM

looks fine in both of mine ?

**danielefc** · 05-27-2006, 10:06 AM

For IE add this to your CSS:

body { text-align: center; }
div { text-align: left; }

**LadynRed** · 05-27-2006, 01:24 PM

It is not centered in IE 6, but is in FF.. no big surprise there.

First of all, put in a DOCTYPE - at LEAST HTML 4.01 Strict or XHTML 1.0 Transitional.

Second, looks like you've got just about everything absolutely positioned. Why ?
If you're going to use CSS, there is no need for font tags.

Validate your CSS.. you have errors. Your HTML doesn't validate either, but without a DOCTYPE it won't validate properly anyway.

**Silent77** · 05-27-2006, 04:37 PM

Danielefc - That just center the text not the images.

LadynRed - it is absolute position because I use a program to cut down on coding time and thats what it saves it as. As far as validation... how will that help me at all if i don't know what code to insert...

**AliKat** · 05-27-2006, 07:15 PM

margin: auto does not work in IE. In order to center anything on your page your body has to have text-align: center; and your container tag needs text-align: left; to over-write the centering of the text. If you have everyting absolutately position then this technique may not work. There is a way to absolutely position and center at the same time using margin: -(half the width of your element)

**Silent77** · 05-27-2006, 08:29 PM

AliKat - "There is a way to absolutely position and center at the same time using margin: -(half the width of your element)" So how would I do this?

**AliKat** · 05-28-2006, 09:14 AM

An Example:

HTML Code:

#page {
 position: absolute;
 left: 50%;
 width: 700px;
 margin-left: -350px;
}

I beleive that is all you need. I'm doing this from memory and didn't test the code out. I read it on someone's blog and I didn't book mark the resource.

**LadynRed** · 05-28-2006, 12:16 PM

I suspect you've used Dreamweaver to convert a table-based layout to CSS. Is that the case ?? I'm familiar with DW's nasty coding in that scenario by making EVERYTHING absolutely positioned -- horrible.

Absolutely positioning everything opens up it's own can of worms, not the least of which is the lack of flow in the document. Learn to code HTML and CSS correctly and you won't need to absolutely position every single thing.

My usual method for centering a layout :
<body>
#container - text-align: center - no fixed width it's JUST a container
#wrapper - fixed width, position: relative, margin: 0 auto;

that structure makes IE center with the text-align and centers in all standards-complaint browers using the margin: 0 auto;.

The rest of your content you put into your #wrapper in the order in which you want it to appear on the page. Absolute positioning is NOT necessary in most cases.

**Silent77** · 05-28-2006, 03:45 PM

AliKat - When the browser isnt set to full view it cuts off the left side.

LadynRed - ...that didnt work at all it cut a lot off

**AliKat** · 05-28-2006, 05:30 PM

LadynRed, don't ya need a text-align: left in your #wrapper? otherwise everything is centered inside it?

**LadynRed** · 05-30-2006, 01:41 PM

Yes, AliKat.. you're right.. I forgot to add that.

Silent, I suspect it 'cut a lot of stuff off' because you probably still have everything else absolutely positioned. Source order and document flow are your friends - not your enemy.

**Silent77** · 05-31-2006, 04:18 PM

I was trying to find a quick fix for this that wouldn't require me to re-code a massive amount of the site.

**LadynRed** · 06:18 PM

Add the following rules to your css file;
body { text-align: center; }
I would also specify your body background color too in the body section.

Add this to the div#rel rules
text-align: left;

**Silent77** · 05-31-2006, 07:03 PM

Thanks LadynRed it is now working... as far as I know

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!