Grow your CSS skills. Land your dream job.

Navigation issue – I.E. 8.0

  • # July 20, 2009 at 7:03 pm

    Hi! I hope that someone can help me with this issue.
    Someone just pointed out that there is a problem with the top navigation of one of my sites in I.E. 8.0. The site has been live for about a week. Here is the link:

    http://www.firstalarmteam.com

    As you will see, the button "Contact" is dropped down one line from the rest of the top navigation buttons. So far, I.E. 8.0 is the only browser having this issue as I checked it out in I.E. 7, Firefox and Safari. I’ve looked at my code and can’t figure what the problem would be since I used an unordered list for the nav and all list items should display the same (shouldn’t they?). Any help would be awesome!

    Here is my css

    Code:
    /*
    960px grid system ~ Core CSS.
    12 Columns ~ Margin left: 10px ~ Margin right: 10px

    Based on the 960.gs grid system – http://960.gs/

    Created by the Grid System Generator – v1.02
    Learn more ~ http://www.gridsystemgenerator.com/
    */

    /* =Containers
    ——————————————————————————–*/
    .container_12
    {
    width: 960px;
    margin: 0 auto;
    }

    /* =Grid >> Global
    ——————————————————————————–*/
    .grid_4, .grid_6, .grid_7, .grid_8, .grid_12 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    }

    /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
    ——————————————————————————–*/
    .alpha {margin-left: 0;}
    .omega {margin-right: 0;}

    /* =Grid >> 12 Columns
    ——————————————————————————–*/
    .container_12 .grid_4 {width: 300px;}
    .container_12 .grid_6 {width: 460px;}
    .container_12 .grid_7 {width: 540px;}
    .container_12 .grid_8 {
    width: 620px;
    }
    .container_12 .grid_12 {
    width: 940px;
    }

    /* `Clear Floated Elements
    —————————————————————————————————-*/
    /* http://sonspring.com/journal/clearing-floats */
    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
    .clearfix:after {
    clear: both;
    content:’ ‘;
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    .clearfix {
    display: inline-block;
    }

    * html .clearfix {
    height: 1%;
    }

    .clearfix {
    display: block;
    }
    #logo {
    width: 420px;
    float: left;
    margin-top: -65px;
    clear: both;
    }
    #logonav_header {
    width: 940px;
    float: left;
    display: inline;
    margin: 0 10px;
    height: 97px;
    }
    #mainimage {
    margin-bottom: 10px;
    }
    #mainbody {
    background-color: #FFFFFF;
    margin: 0 10px 0 10px;
    height: 320px;
    padding-right: 20px;
    }
    #maintext {
    float: left;
    width: 620px;
    display: inline;
    }
    #topedge {
    background-image: url(images/rounded_top.png);
    background-repeat: no-repeat;
    height: 16px;
    margin: 0 auto;
    width: 940px;
    }
    #bottomedge {
    background-image: url(images/rounded_bottom.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    height: 18px;
    width: 940px;
    }
    #topnav {
    margin-left: 485px;
    margin-top: 0px;
    clear: both;
    display: block;
    }
    #topnav ul {
    display: inline;
    list-style-type: none;
    width: 450px;
    }
    #topnav li {
    display: inline;
    }
    #topnav a {
    display: block;
    float: left;
    width: 90px;
    text-decoration: none;
    text-align: center;
    height: 31px;
    color: #FFFFFF;
    padding-top: 38px;
    }
    #topnav a.activehome {
    background-image: url(images/topnav_active.png);
    background-repeat: no-repeat;
    background-position: 6px 0;
    }
    #topnav a.activehome:hover {
    background-image: url(images/topnav_active.png);
    background-repeat: no-repeat;
    background-position: 6px 0;
    }
    #topnav a:hover {
    background-image: url(images/topnav_button.png);
    background-repeat: no-repeat;
    background-position: 6px 0;
    }
    #footer {
    width: 910px;
    padding: 0 15px;
    background-color: #FFFFFF;
    float: left;
    display: inline;
    }
    #sidebar {
    float: left;
    width: 288px;
    display: inline;
    margin-left: 12px;
    text-align: left;
    }
    #securetips {
    width: 230px;
    padding: 0 10px;
    border-right: solid #d20d0d 1px;
    margin-left: 1px;
    }
    #securetips ul {
    display: inline;
    margin-left: 12px;
    }
    #securetips li {
    height: 50px;
    margin-bottom: 13px;
    font-size: 13px;
    list-style-image: url(images/redbullet.png);
    line-height: 16px;
    margin-left: 15px;
    }
    #homeproducts {
    width: 230px;
    padding: 0 10px;
    border-right: solid #d20d0d 1px;
    margin-left: 1em;
    }
    #homeproducts ul {
    display: inline;
    margin-left: 12px;
    }
    #homeproducts li {
    height: 20px;
    margin-bottom: 13px;
    font-size: 13px;
    list-style-image: url(images/redbullet.png);
    line-height: 16px;
    margin-left: 15px;
    }
    #copyright {
    margin: 0 auto;
    width: 940px;
    text-align: center;
    }
    #maintext ul {
    }
    #maintext li {
    font-size: 13px;
    line-height: 20px;
    }
    .fltrt {
    float: right;
    padding-right: 20px;
    }
    .fltlft {
    float: left;
    }
    #mainbody_products {
    background-color: #FFFFFF;
    margin: 0 10px 0 10px;
    height: 420px;
    }
    #products {
    float: left;
    width: 620px;
    display: inline;
    }
    #products ul {
    list-style-type: none;
    margin-left: -23px;
    }
    #products li {
    font-size: 13px;
    height: 45px;
    line-height: 17px;
    }
    #contactinfo {
    width: 230px;
    padding: 0 10px;
    border-right: solid #d20d0d 1px;
    margin-left: 1px;
    }
    #mainbody_contact {
    background-color: #FFFFFF;
    margin: 0 10px 0 10px;
    height: 765px;
    }
    #mainbody_thanks {
    background-color: #FFFFFF;
    margin: 0 10px 0 10px;
    height: 250px;
    }
    #mainbody_about {
    background-color: #FFFFFF;
    margin: 0 10px 0 10px;
    height: 350px;
    }
    #slideshow {
    margin-bottom: 10px;
    width: 940px;
    height: 220px;
    overflow: hidden;
    position: relative;
    }
    #slideshow img {
    position: absolute;
    left: 0px;
    top: 0px;
    }
    #brands {
    text-align: center;
    }
    #brands img {
    border: 0;
    margin-bottom: 15px;
    }

    @charset “UTF-8″;
    h1 {
    font-size: 30px;
    text-indent: -9999px;
    background-image: url(images/fa_logo.png);
    background-repeat: no-repeat;
    height: 47px;
    }
    h2 {
    font-size: 24px;
    font-weight: normal;
    }
    h3 {
    font-size: 18px;
    color: #d20d2d;
    font-weight: normal;
    }
    .container_12 p {
    font-size: 13px;
    line-height: 20px;
    }
    .copyright {
    font-size: 11px;
    text-align: center;
    color: #FFFFFF;
    }
    .securitytips {
    text-indent: -9999px;
    background-image: url(images/securitytips.png);
    background-repeat: no-repeat;
    height: 24px;
    }
    a:link {
    color: #333;
    text-decoration: underline;
    }
    a:visited {
    text-decoration: underline;
    color: #000000;
    }
    a:hover {
    text-decoration: none;
    }
    a:active {
    text-decoration: underline;
    outline:none;
    }
    .address {
    font-size: 12px;
    color: #666666;
    text-align: center;
    padding-top: 15px;
    }
    .products_h3 {
    text-indent: -9999px;
    background-image: url(images/products_h3.png);
    background-repeat: no-repeat;
    height: 24px;
    }
    .producthead {
    color: #d20d0d;
    font-size: 14px;
    }
    .contactinfo {
    font-size: 13px;
    line-height: 19px;
    }
    .contactform {
    font-size: 13px;
    color: #999999;
    }
    .required {
    color: #d20d0d;
    }
    .topbrands_h3 {
    text-transform: uppercase;
    color: #d20d0d;
    text-align: center;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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