IE6 centering doesn’t work

@augustFeb 09.2006

Hi, I’ve got a page with a div that I wish to center on the page.
Additionally it should be offset from the top of the document edge by a certain pixel amount ~~[COLOR=Blue]~~margin-top[/COLOR]. Both fail in IE6. here’s the style pertaining to that div:

[CODE] html, body {background: #000000; margin: 0; padding: 0; [COLOR=Red]text-align: center;[/COLOR]} /*IE block element centering*/

div.center {background: url(Backgrounds/centerImg.gif) center center no-repeat; [COLOR=Red]margin: 0 auto;[/COLOR] [COLOR=Blue]margin-top: 115px;[/COLOR] width: 460px; height: 470px; padding: 10px;}[/CODE]

The code works as intended In Firefox 1 and Safari for Mac OS. But on IE6 for PC the “center” div is left-aligned instead of centered, and the top margin is not the same, and the page looks very different in that browser.
I thought that ‘text-align: center” would center elements in IE? And why, WHy, is the margin different in IE? ?

help’s appreciated.

to post a comment

CSS

18 Comments(s) _↴

@SaveSheepFeb 09.2006 — #i learned two things in internet explorer and dreamweaver that will help any page you build.

one. take out this damn line at the top of your page (if you have it).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

that'll definately make a lot of your problems go away.

And also, instead of using the margin: 0, define them all seperately.

topmargin: 0;

leftmargin: 0;

rightmargin: 0;

bottommargin: 0;

does that help any? also, can you show me your page?

@pcthugFeb 09.2006 — #one. take out this damn line at the top of your page (if you have it).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[/QUOTE]
Removing the doctype will just make IE go into quirks mode... Not a good Idea
And also, instead of using the margin: 0, define them all seperately.

topmargin: 0;

leftmargin: 0;

rightmargin: 0;

bottommargin: 0;
[/QUOTE]
This isnt even valid CSS!

The correct way to do this is; top-margin: 0, etc; however margin: 0; is exactly the same.

The correct way to fix your problem:

[CODE]
 html, body {background: #000000; 
 margin: 0; padding: 0;
 text-align: center;} /*IE block element centering*/
 
 div.center {background: url(Backgrounds/centerImg.gif) 
 center center no-repeat;
 margin: [COLOR=Red]115px 0 0 0[/COLOR] auto;
 width: 460px;
 height: 470px;
 padding: 10px;}
 [/CODE]

@augustauthorFeb 09.2006 — #Thanks, it sounds good, although I can't try it until tomorrow. 'd like to try the separate margin attributes.

Also, on my page the doctype is transitional not strict. (websites need to have some form of doctype right?)

Here's a link to the page (with some fill-out text that describes another problem. ? )

http://www.geocities.com/sampelsite/css_testing/centerit.html

Actually I noticed that the center div's top-margin differs in 1 pixel between Firefox and Safari. Weird, seems one must choose one to accomodate 100% at the expense of failure in another.

Thanks for looking.

@Jeff_MottFeb 09.2006 — #august, something elsewhere in your page must be causing the problem. The following HTML document centers exactly as expected in IE6. (IE5 will still need a [i]text-align:center[/i] and [i]text-align:left[/i] combination.)

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 
 &lt;html lang="en-us"&gt;
 
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=us-ascii"&gt;
 &lt;style type="text/css"&gt;
 #Page { width: 460px; border: 1px solid black; margin: 115px auto 0 auto }
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;div id="Page"&gt;
 &lt;p&gt;Hello, World!&lt;/p&gt;
 &lt;/div&gt;
 
 &lt;/body&gt;
 
 &lt;/html&gt;

And pcthug was right: you do [i]not[/i] want to remove the doctype.

@ray326Feb 09.2006 — #one. take out this damn line at the top of your page (if you have it).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

that'll definately make a lot of your problems go away.[/QUOTE]No, that will just be the beginning of your problems. The doctype is required for proper (relatively) IE behavior.

@augustauthorFeb 09.2006 — #So it's a mystery?

@Jeff_MottFeb 10.2006 — #Until you show us the whole page, so we can check the whole code, yeah.

@augustauthorFeb 10.2006 — #Jeff, I provided the link to the page above. If you're intrested here it's again:

http://www.geocities.com/sampelsite...g/centerit.html

Thanks all for helping. I'm constantly trying to figure out things myself, but since I don't have IE for pc it's not often that I get a chance to try out the layout for that browser.

@Jeff_MottFeb 10.2006 — #You'll need to fix the link. The forum replace part of it with "...".

@augustauthorFeb 10.2006 — #"http://www.geocities.com/sampelsite/css_testing/centerit.html"

@Jeff_MottFeb 11.2006 — #The line [i].Align {text-align: left;}[/i] is messing up the centering in IE. You can remove that line, or change it to [i].Align {text-align: center;}[/i].

@augustauthorFeb 11.2006 — #Jeff, I appreciate your help.

I'm just confused as to how to center a block-level element in IE for PC. That browser doesn't understand margin: auto, isn't that the case anymore?

@FangFeb 11.2006 — #you must also give it width.
<div style="width:20em; margin:0 auto;">bla</div>

@Ru55e11BFeb 11.2006 — #I never use divs as master positioning elements for the reasons above. Admittedly, I do use them for sub elements, but my "container element" is always a table which is aligned center.

Then add all the divs you want.

I know it is not as elegant as a div only site, but really divs can be a headache if you use them as master positioning elements.

@FangFeb 11.2006 — #I never use divs as master positioning elements for the reasons above. Admittedly, I do use them for sub elements, but my "container element" is always a table which is aligned center.[/QUOTE] Tables should not be used for layout
I know it is not as elegant as a div only site, but really divs can be a headache if you use them as master positioning elements.[/QUOTE] Div only sites are semantically incorrect.

The headache comes from not understanding css.

@pcthugFeb 11.2006 — #That just disregards the fact of even using a css layout in the first place,

A div can do anything a table can do, it may take a little more time to get it to function properly, but in the end its well worth it

@Jeff_MottFeb 11.2006 — #I'm just confused as to how to center a block-level element in IE for PC. That browser doesn't understand margin: auto, isn't that the case anymore?[/quote]That is the case for IE 5. IE 6 has always understood margin auto. And in any case, you were assigning properties to the wrong DIVs to create centering in IE 5. You would have to do [i].Align{text-align:center}[/i] and [i].center{text-align:left}[/i].

@ray326Feb 11.2006 — #The headache comes from not understanding css.[/QUOTE]Is anyone else here old enough to remember Stranger In A Strange Land? There's a difference between knowing that CSS exists and making it an integral part of your development practice, i.e. "grokking" it. If you continue to use tables for layout you don't grok CSS.

Also in #CSS _↴

sprymenubar help please Help w/ Min-Width Main Stylesheet & Java Script

Success!

Help @august spread the word by sharing this article on Twitter...

Tweet This

IE6 centering doesn’t work

18 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IE6 centering doesn’t work

18 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #CSS _↴