Grow your CSS skills. Land your dream job.

Navigation Error in IE

  • Wes
    # July 2, 2009 at 8:58 pm

    This probably a really easy problem to fix but I am still learning the ins and outs of CSS

    So the problem is that in IE my page looks like this
    [img]http://www.wesascolese.com/images/IE-screen.png[/img]

    on every other browser (that I know of) it looks like this
    [img]http://www.wesascolese.com/images/ff-screen.png[/img]

    here is my CSS

    Code:
    body
    {
    background:url(images/bg.jpg);
    font-family:Verdana, Geneva, sans-serif;
    font-size:68.5%;
    }

    h2 { font-size:1.6em); color:#827857; text-transform:uppercase;}
    h3 { font-size:1.4em); color:#827857; text-transform:uppercase;}
    h4 { font-size:1.2em); color:#827857; text-transform:uppercase;}
    h5 { font-size:0.8em); color:#827857; text-transform:uppercase;}

    #page-wrap
    {

    width:800px;
    margin: 0 auto;
    background:url(images/main-bg.jpg) repeat-y;
    }

    #header
    {
    margin:0 auto;
    background:url(images/banner.jpg);
    width:800px;
    height:155px;

    }

    #header ul
    {
    margin:0 auto;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:2.0em;
    font-weight:bold;
    margin-left:150px;

    }

    #header ul li a
    {
    display:block;
    width:100px;
    float:left;
    color:#fff;
    margin:100px 0 5px 0;
    text-decoration:none;
    text-align:center;
    }

    #header ul li a:hover
    {
    color:#e8e4d8;
    }

    #main
    {
    width:450px;
    margin:0 auto;
    }

    #main p
    {
    color:#827857;
    }

    #gallery ul
    {
    margin:0 auto;
    list-style:none;
    }

    #gallery ul a
    {
    color:#FFF;
    }
    #gallery ul li
    {
    float:left;
    margin:5px;
    opacity:.5;

    border: 3px solid #fff;
    outline: 1px solid #ddd;
    background-position: 50% 50%;
    }

    #gallery ul li:hover
    {
    outline-color: #bbb;
    opacity: .99 /* safari bug */
    }

    #gallery ul li img
    {
    height:50px;
    width:50px;
    background-position: 50% 50%;

    }

    #footer
    {

    margin:0 auto;
    background:url(images/footer.jpg);
    width:800px;
    height:191px;
    }
    #footer p
    {
    text-align:center;
    padding-top:30px;
    color:#FFF;
    font-size:0.8em;
    text-transform:uppercase;
    }

    .clear {clear:both}

    # July 3, 2009 at 2:37 am

    I believe you will find your solution in a very recent thread:

    viewtopic.php?f=2&t=862

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".