Margin:AUTO does not work in IE

blade52x · #1 06-15-2007, 05:51 PM

I center a lot of things using css with

#div {margin:auto; width:xxx;}

While this works in FF perfectly, IE does not center this div - so how do I get things to center IE as well?

Mr Initial Man · #2 06-15-2007, 06:05 PM

The best way is to give a parent element to #div, and write something like

#divparent{text-align:center;}
#div {margin:auto; width:xxx; text-align:left;} (unless you want the text centered as well.)

blade52x · #3 06-15-2007, 06:34 PM

Text alignment is not my problem - but thanks anyway.

I should have been more detailed. My problem is entire "blocks" of information are not being centered. For example - the biggest block: the website wrapper is not being centered.

#wrapper {margin:auto; width:1000px; height:100%; margin-top:5px; background-color:white; overflow:auto}

That's what I have - and all content goes inside of this 1000px wide block (website meant for 1024x768 resolution and higher, I can't stand making ones for less). Anyway, in FF, this entire block is centered, while in IE is appears on the left.

Mr Initial Man · #4 06-15-2007, 06:45 PM

You don't understand, bud. IE doesn't support margin:auto;. text-align:center is a workaround. Try it.

blade52x · #5 06-15-2007, 07:22 PM

Ok lol I didn't understand (but now I do), so I tried it and it worked!

Thank you!

**WebJoel** · #6 06-15-2007, 07:53 PM

IE does support "margin:auto;" if there is a WIDTH to the element, and a valid !doctype. In the lack of a valid !doctype, IE is in 'quirks mode' and 'guesses' (worse than usual)...

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div style="width:400px; height:400px; padding:15px; border:5px double gray; margin:auto;">
<h1>First/main header</h1>
<p>Your text goes here to say whatever you have to say, etc.Your text goes here to say whatever you have to say, etc.Your text goes here to say whatever you have to say, etc.</p>
</div>

</body>
</html>

This centers the div, while text-align:center; centers the text that is in the container.

Centauri · #7 06-15-2007, 09:29 PM

Quote:

Originally Posted by Mr Initial Man

IE doesn't support margin:auto;.

False information ...............

**WebJoel** · #8 06-17-2007, 11:09 AM

[QUOTEFalse information ...............[/quote] I'm a little more charitable here... doesn't support it without a width statement and a valid !doctype. I could see how one might at first run at this might think that IE doesn't support margin:auto;. OP asked 'how to center in IE' but also mentioned 'works in Firefox' and without seeing the whole code, 99% confidence that this is a missing valid !doctype issue.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)