Grow your CSS skills. Land your dream job.

problems veiwing in IE7/6

  • # November 5, 2008 at 11:05 am

    This site I am building for learning and testing things works fine in firefox, IE8, opera and Safari but it doesn’t look right in IE6/7 (I haven’t tested versions below that?) Why would it be doing that?

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Lorem ipsum……………………………………………………………………………..esque id, euismod.



    Code:
    body
    {
    background:url(‘images/header.jpg’) repeat-x top;
    background-color: #ffffcc
    }

    div#page-wrap {
    margin: 0 auto;
    width: 920px;
    background: url(images/page_bg.jpg) repeat-y;
    }

    ul#nav {
    height: 200px; width: 900px;
    background: url(‘/images/banner_ctr.gif’) no-repeat;
    margin: -8px 0px 0px 0px;
    list-style: none;
    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 98px;
    float: left;
    text-indent: -9999px;
    }
    ul#nav li.home a {
    width: 319px;
    background: url(http://cdn.css-tricks.com/images/nav_home.jpg) bottom center no-repeat;
    margin: 150px -20px -6px -40px;
    }
    ul#nav li.forum a {
    width: 286px;
    background: url(http://cdn.css-tricks.com/images/nav_forum.jpg) bottom center no-repeat;
    margin: 150px 0px 0px 20px;
    }
    ul#nav li.contact a {
    width: 315px;
    background: url(http://cdn.css-tricks.com/images/nav_contact.jpg) bottom center no-repeat;
    margin: 150px 0px 0px 0px;
    }
    ul#nav li a:hover {
    background-position: center center;
    }

    #main-content {
    padding: 30px 50px 30px;
    }

    #footer {
    min-height:57px;
    background:url(images/footer_bg.jpg) no-repeat;

    # November 5, 2008 at 11:12 am

    Add

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

    to your CSS to reset the default margin…

    gr. Bert

    # November 6, 2008 at 9:38 am

    But that just breaks it in the other browsers aswell then.

    # November 6, 2008 at 9:49 am
    "matt25" wrote:
    But that just breaks it in the other browsers aswell then.

    Remove the margin-top:-8px
    That should do it…

    gr. Bert

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

You must be logged in to reply to this topic.

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