Grow your CSS skills. Land your dream job.

Centering the page/ Page Wrap in IE

  • # August 24, 2008 at 9:53 pm

    Ok, I did my first site from scratch with CSS/HTML, and was very happy to finish it. I figured there would be no problems with it as it is pretty straight forward CSS code(it even validates!), but just for the heck of it I’ll try to look at it with IE..

    Well, guess what, whole positioning was messed. Nothing was centered like it was supposed to.
    All help appreciated!

    Here’s the code:

    Code:
    body{
    background: URL(Images/bg.jpg) repeat-x #101010;
    font: 10px Georgia, “Times New Roman”, Times, serif;
    color:#FFFFFF;
    }

    div#page-wrap {
    margin: 0 auto;
    width: 691px;
    }
    div#header {
    height: 341px;
    background: url(Images/header.png);
    }
    div#server-stats{
    color:#c71200;
    position:relative;
    top:150px;
    left:400px;
    }
    div#menu-div{
    position:relative;
    top: 245px;
    }
    ul#menu li{
    display: inline;
    }
    ul#menu li a{
    display: block;
    height: 24px;
    float: left;
    position:relative;
    left: 100px;
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 5px;
    background:url(Images/menu-bg.png) repeat-x;
    color:#e7a7e8;
    text-decoration:none;
    font-weight:bold;
    font-size:18px;
    }
    ul#menu li a:hover, a:active, a:focus{
    background-position:bottom center;
    color:#bf59c1;
    outline:none;
    }
    div#content{
    position:relative;
    width: 506px;
    left: 57px;
    padding: 0px 50px 20px 50px;
    background:url(Images/50trans-bg.png) repeat;
    }
    div#footer{
    position:relative;
    width: 506px;
    left: 57px;
    padding: 2px 50px 2px 50px;
    background:url(Images/50trans-bg.png) repeat;
    color: #393939;
    text-align:right;
    border-top:#393939 solid 1px;
    }

    # August 25, 2008 at 1:11 am

    We really need to see the HTML as well to be able to help with this.

    # August 25, 2008 at 2:35 am

    add this to body style that is on the beginning

    Code:
    text-align:center;

    then on the div#page-wrap style add

    Code:
    text-align:left;

    you need to do this because IE 6 and below doesnt understand auto margins and doesn’t center them, but fortunately (in this case) it doesnt understand text-aligns that well so this trick should fix it, if i said something wrong then someone please correct me.

    # August 25, 2008 at 11:54 am

    Thanks, that did the trick with centering. But positioning is still messed, looks like Position:relative isn’t working well with anything earlier than IE7 (IE7 itself excluded).. Anyway to fix that as well?

    EDIT: The positioning problem is caused by the Unit PNG Fix. :( But my whole design is based on PNG’s transparency so it’s pretty bad news. Any way to alter the Unit PNG Fix to make it work?

    EDIT2: Ok, deleting the "es.position="static"" part from the PNG Fix’s script did it. (it is at the end of the script ), so now it works with anything newer than IE5.5! :) (everything still works even with IE5.5, except the transparency. But the positioning is still correct .

    Conclusion:
    What I had to do to make the site work in all browsers was the fix rayishu posted in the post above, to make the centering work. Then I had to add 2 more div’s "Content-text" and "Footer-text" to make the padding work. As FF made the div larger as padding grew, and IE didn’t. So my "Content" and "Footer" div’s are just for background and the "*-text" ones are for the text inside them. And finally I had to alter the PNG fix JS to make it not mess up the Position: relative.

    My conclusion is that different browsers SUCK! Everybody start using Firefox, Safari… anything not IE really. Or at least update it to latest version if you really want to use it.

    box
    # August 26, 2008 at 7:43 am
    "rayishu" wrote:
    …you need to do this because IE 6 and below doesnt understand auto margins and doesn’t center them…

    IE6 understands auto margins just fine – but you must use a strict doctype. Why people insist on using transitional doctypes these days I’ll never understand.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".