Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering the page/ Page Wrap in IE

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #23129
    Conspi
    Member

    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;
    }

    #49350
    curtismchale
    Member

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

    #49351
    rayishu
    Member

    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.

    #49376
    Conspi
    Member

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.