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 margin-top. Both fail in IE6. here's the style pertaining to that div:
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: 0 auto;
margin-top: 115px;
width: 460px;
height: 470px;
padding: 10px;}
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.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?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">
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;
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:
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: 115px 0 0 0 auto;
width: 460px;
height: 470px;
padding: 10px;}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.
)
<!-- m --><a class="postlink" href="http://www.geocities.com/sampelsite/css_testing/centerit.html">http://www.geocities.com/sampelsite/css ... terit.html</a><!-- m -->
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.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 text-align:center and text-align:left combination.)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<style type="text/css">
#Page { width: 460px; border: 1px solid black; margin: 115px auto 0 auto }
</style>
</head>
<body>
<div id="Page">
<p>Hello, World!</p>
</div>
</body>
</html>
And pcthug was right: you do not want to remove the doctype.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.No, that will just be the beginning of your problems. The doctype is required for proper (relatively) IE behavior.So it's a mystery?Until you show us the whole page, so we can check the whole code, yeah.Jeff, I provided the link to the page above. If you're intrested here it's again:
<!-- m --><a class="postlink" href="http://www.geocities.com/sampelsite...g/centerit.html">http://www.geocities.com/sampelsite...g/centerit.html</a><!-- m -->
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.You'll need to fix the link. The forum replace part of it with "..."."http://www.geocities.com/sampelsite/css_testing/centerit.html"The line .Align {text-align: left;} is messing up the centering in IE. You can remove that line, or change it to .Align {text-align: center;}.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?you must also give it width.
<div style="width:20em; margin:0 auto;">bla</div>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.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. 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. Div only sites are semantically incorrect.
The headache comes from not understanding css.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 itI'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?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 .Align{text-align:center} and .center{text-align:left}.The headache comes from not understanding css.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.
Additionally it should be offset from the top of the document edge by a certain pixel amount margin-top. Both fail in IE6. here's the style pertaining to that div:
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: 0 auto;
margin-top: 115px;
width: 460px;
height: 470px;
padding: 10px;}
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.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?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">
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;
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:
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: 115px 0 0 0 auto;
width: 460px;
height: 470px;
padding: 10px;}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.
)<!-- m --><a class="postlink" href="http://www.geocities.com/sampelsite/css_testing/centerit.html">http://www.geocities.com/sampelsite/css ... terit.html</a><!-- m -->
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.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 text-align:center and text-align:left combination.)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<style type="text/css">
#Page { width: 460px; border: 1px solid black; margin: 115px auto 0 auto }
</style>
</head>
<body>
<div id="Page">
<p>Hello, World!</p>
</div>
</body>
</html>
And pcthug was right: you do not want to remove the doctype.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.No, that will just be the beginning of your problems. The doctype is required for proper (relatively) IE behavior.So it's a mystery?Until you show us the whole page, so we can check the whole code, yeah.Jeff, I provided the link to the page above. If you're intrested here it's again:
<!-- m --><a class="postlink" href="http://www.geocities.com/sampelsite...g/centerit.html">http://www.geocities.com/sampelsite...g/centerit.html</a><!-- m -->
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.You'll need to fix the link. The forum replace part of it with "..."."http://www.geocities.com/sampelsite/css_testing/centerit.html"The line .Align {text-align: left;} is messing up the centering in IE. You can remove that line, or change it to .Align {text-align: center;}.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?you must also give it width.
<div style="width:20em; margin:0 auto;">bla</div>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.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. 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. Div only sites are semantically incorrect.
The headache comes from not understanding css.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 itI'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?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 .Align{text-align:center} and .center{text-align:left}.The headache comes from not understanding css.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.