Grow your CSS skills. Land your dream job.

Help for a CSS newbie – IE is screwing up my layout!

  • # May 22, 2008 at 3:05 pm

    Hey all,
    Apologies in advance for the "newbie" question – but I have built a CSS layout that works fine in Safari, FF, Opera…but when viewed in IE the top menu items and the background div are messed up. Being a beginner even to the semantics of CSS…all my research still has me completely stymied. I had used some of Chris’s suggestions and put the top horizontal navigation in as a ul#nav and wrapped the entire layout in a div#pagewrap. I am totally lost as to where I went wrong. So if anyone could give me a detailed clue designed for a newb…I would be eternally grateful!!!! Website addy is: http://www.celestapm.com

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    body {
    font-size: 62.5%;
    font-family: Verdana, helvetica, sans-serif;
    background: url(images/c_bg.jpg) repeat-x top #ffffff;
    }

    p {
    font-size: 1.4em;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    }

    li {
    font-size: 1.3em;
    line-height: 1.2em;
    margin-bottom: 0.8em;
    }

    a { color: #336699; text-decoration: none; }
    a:hover, a:active { color: #000066; text-decoration: none; }

    h1 { font-size: 1.5em;
    margin-bottom: 0.8em;
    text-transform: capitalize;
    }

    h2 { font-size: 1.3em;
    text-transform: none;
    font-style: italic;
    font-weight: bold;
    color: #336699;
    margin-bottom: 0.8em;
    }

    h3 { font-size: 1.6em;
    text-transform: uppercase;
    font-style: oblique;
    letter-spacing: 2px;
    }

    h4 {
    font-size: 1.0em;
    font-weight: normal;
    font-style: normal;
    }

    .clear { clear: both; }
    .floatLeft { float: left; }
    .floatRight { float: right; }
    img.floatRight {
    margin: 5px 0px 10px 15px;
    }

    img.floatLeft {
    margin: 5px 15px 10px 0px;
    }

    a img {
    border: none;
    }


    a:hover img {
    border: none;
    border: none;
    }

    div#page-wrap {
    width:805px;
    margin: 0 auto;
    }

    ul#nav {
    height: 199px; width: 805px;
    background: url(images/header2_bg.jpg) no-repeat;
    list-style: none;
    padding-left: 200px;
    margin-top: -10px;
    }

    ul#nav li a {
    display: block;
    width: 140px center;
    float: left;
    margin-top: 175px;
    font-weight: bold;
    text-decoration: none;
    color: #336699;
    }
    ul#nav li a:hover, ul#nav li a:active {
    color: #000066;
    }

    ul#list {
    list-style-type: circle;
    list-style-color: #e9bc3d;
    padding-left: 50px;
    }

    ul#list li a {
    display: block;
    text-decoration: none;
    }

    div#nav {
    height: 199px; width: 805px;
    background: url(images/header2_bg.jpg) no-repeat;
    list-style: none;
    padding-left: 200px;
    margin-top: -10px;
    }

    div#nav li a {
    display: block;
    width: 140px center;
    float: left;
    margin-top: 175px;
    font-weight: bold;
    text-decoration: none;
    color: #336699;
    }
    div#nav li a:hover, ul#nav li a:active {
    color: #000066;
    }
    div#french {
    height: 7px; width: 20px;
    float: right;
    padding-left: 805px;
    margin-top: -200px;
    text-transform: none;
    text-align: right;
    }

    div#french a {
    color: white;
    text-decoration: none;
    }

    div#english {
    height: 7px; width: 20px;
    float: right;
    padding-left: 805px;
    margin-top: -200px;
    text-transform: none;
    text-align: right;
    }

    div#english a {
    color: white;
    text-decoration: none;
    }

    div#main-content {
    padding-bottom: 50px;
    }
    div#main-content div#left-col {
    float: right;
    width: 610px;
    }
    div#main-content div#side-bar {
    background: url(images/celesta_sidebar_img.jpg) no-repeat;
    float: left;
    width: 175px;
    height: 475px;
    margin-right: 15px;
    margin-top: 35px;
    }
    div#main-content div#side-bar div#side-menu {
    width: 200px;
    float: left;
    margin-left: 15px;
    margin-top: -25px;
    }
    div#main-content div#side-bar div#side-menu p {
    text-transform: none;
    font-weight: none;
    }

    div#main-content div#side-bar div#side-menu p span {
    color: #e9bc3d;
    }

    div#footer {
    background: #ffffff;
    color: white;
    padding: 15px 0 10px 0;
    text-transform: capitalize;
    border-top: 2px solid #336699;
    text-align: right;

    # May 22, 2008 at 4:45 pm

    Looks fine to me in IE 7. The only thing I see in IE 6 is the sidebar getting pushed down. Might wanna try widening out the main page wrap or shrinking the main column to see if you can get it to come back up.

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

You must be logged in to reply to this topic.

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