I used auto margins. I was reading online elsewhere that giving the body and the container div text align center would make ie obey but it doesn't. plus I don't want my text centered. have some code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sunnybrook Homes</title> <link rel="stylesheet" href="sunnybrook_default.css" /> <link type="text/javascript" href="IEmarginFix.js" /> </head> <body> <div id="outer_container"> <div id="top"> <img id="logo" src="images/logo.gif" alt="Sunnybrook Homes, ...dedicated to making a house your home" /> <div id="main-menu"> <ul id="vert-menu"> <li id="home"><a href="index.html"><img src="home.gif" alt="home" /></a></li> <li id="home"><a href="index.html"><img src="home.gif" alt="home" /></a></li> <li id="home"><a href="index.html"><img src="home.gif" alt="home" /></a></li> <li id="home"><a href="index.html"><img src="home.gif" alt="home" /></a></li> </ul> </div> </div> <div id="bottom">howdy<br /> </div> </div> </body> </html> HTML: and the css: body { background-image: url(images/blueprint_bg1.jpg); font-family: Arial, Helvetica, sans-serif; } #outer_container { height: auto; max-width: 803px; margin: 0 auto; margin-top: -8px; background-image: url(images/middle_04.gif); background-repeat: repeat-y; } #top { max-width: 803px; background-image: url(images/top_02.jpg); background-position: top left; margin: 0 auto; background-repeat: no-repeat; } #bottom { background-image: url(images/bottom_05.jpg); background-position: bottom left; background-repeat: no-repeat; vertical-align: bottom; margin: 0 auto } #logo { padding-left: 50px; padding-top: 40px } #menu { float: left; max-width: 182px } ul { margin: 20px 0px 0px 20px; list-style:none } Code (markup):
Use this code in your CSS style sheet to fix your problem in IE: * html body { text-align: center; } * html #outer_container { margin: 0 auto; text-align: left; } Code (markup): The * html makes it only apply to IE and not FF or other browsers. I had the same problem and this is what I came up with... Hope it helps!
I put those in the stylesheet after my original body and #outer_container because of the whole thing about only the second of two contradicting rules being applied but no change. I also changed the doctype to xhtml strict which I read might work, yet still NOTHING! and it gets sort of spooky: I recently made another site with the same strict xhtml doctype and auto margins and it works fine in the exact same version of ie! If anythings getting punched in the face around here it's ie. I think I'll just copy that stylesheet and stick in my id's and see if i can duplicate the problem
Your problem actually has to do with the max-width code which IE does not understand. Since a width is not applied to the container, it cannot be centered! This is what you need to use: #outer_container { height: auto; max-width: 803px; [B]width:expression((document.documentElement.clientWidth > 1) ? "803px" : "auto");[/B] margin: 0 auto; margin-top: -8px; background-image: url(images/middle_04.gif); background-repeat: repeat-y; } Code (markup): The width will be read only by IE which will then set the width to 803 and then apply the margin auto command to it aswell. Hope this helps.
GAH... Ok, first off ease up on the containers, and you might want to try not using the same id more than once (I realize it's an example, but there's no reason for it) Of course, I'm having trouble figuring out what 'text' you want centered - since all you have for text is one word. Do you mean content centered? The menu won't center because you have it float:left - the logo won't center because you didn't declare anything on it, so it's inline content and you didn't set text-align in it's container... The howdy text is just text dumped into #bottom - which you didn't set text-align on either.... and it's margin:auto isn't going to do jack since it's default behavior is going to be 100% width. Margin:0 auto; centers block level elements (like DIV and P) with declared widths inside their containers (usually other DIV's)... text-align:centers text inside block level elements. #centered_box { width:320px; margin:0 auto; border:1px solid #000; } <div id="centered_box">Some text</div> would center the box, but NOT the text inside the box which would default to left margin. #centered_content { width:320px; text-align:center; border:1px solid #000; } <div id="centered_box">Some text</div> Would center the text inside the box, but NOT the box itself. #centered_both { width:320px; text-align:center; margin:0 auto; border:1px solid #000; } <div id="centered_both">Some text</div> Would center the text inside a centered box. Looking at your code - I'm having a REALLY hard time figuring out what you are even trying to do... but I'm fairly certain whatever it is could be done without .js or hacks, excepting the min-width of course.