Problem with CSS. SOLVED!

MagicPrime · April 2008

#headerbox {
position:relative;
width:750px;
margin-left:auto;
margin-right:auto;
height:145px;
}

#headerbox #Library_Header {
position:relative;
top:2px;
width:750px;
height:145px;

}

#center-box {
position:relative;
margin-left:auto;
margin-right:auto;
top:5px;
height:auto;
width:750px;
background-color:#FFFFFF;
padding:1%;
overflow: auto;
}

#bottom-box {
position:relative;
margin-left:auto;
margin-right:auto;
height:auto;
top:100px;
width:750px;
text-align: center;
background-color: #FFFFFF;
padding:1%;
}

I am working on a new design template for a webpage where I work. I want the entire page centered and that is my StyleSheet minus all the font formatting. Now, in FireFox everything is centered and it looks nice, but in internet explorer everything is against the left edge of the page. Where did I go wrong with the code?

Afty · April 2008

instead of margin-left:auto and margin-right:auto, just try

margin:auto;

Also you have a lot of position inherit in there, personally i have never had to use that in almost 3 years of being a clientside developer.

You might want to try sticking a position:relative; on your container element and positioning everything else in relation to that.

Heir · April 2008

Alternatively, sometimes in IE6 I've had to do Margin: 0 auto;

Echo · April 2008

Are all those boxes going to be centered? If so, I'd stick them all inside a div called #containerbox or something and set that one centered instead of repeating CSS for lots of classes. Less prone to errors this way as well.

Don't have time to do a proper writeup now, so I'll just toss a link that explains centering fairly well. Google has plenty more.

SporkAndrew · April 2008

Heir wrote: »

Alternatively, sometimes in IE6 I've had to do Margin: 0 auto;

margin: 0 auto; (which is the same as margin-left: auto; margin-right: auto;) will only work for centreing divs, etc, when you've got the XML preamble to put the browser into standards-compliant mode.

ie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

And expanding on what Echo said, if everything on the page is being centred then why bring more non-semantic markup into it? You can pretty easily get everything centred by using the body tag -- something that has to be in every page anyway.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {
        width: 750px;
        margin: 0 auto;
        border: 2px solid #900;
    }
    .box {
        width: 50%;
        margin: 10px auto;
        border: 2px solid #ddd;
    }
    --></style>
</head>
<body>
    <h1>woo yeah</h1>
    
    <p>everything is centered</p>
    
    <div class="box"><p>this is in a box</p></div>
</body>
</html>

So then you'd just have your regular divs with width of 100% and you shouldn't run into any more problems.

MagicPrime · April 2008

Alright, I got it.

I had to use the "0 auto" code (thanks Heir)
and I had to use a body code that I found on the link Echo posted.

Thanks a ton to all!

Problem Solved.

Penny Arcade

Quick Links

Problem with CSS. SOLVED!

Posts