Forums

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

Home Forums CSS Navigation issue – I.E. 8.0

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #25510
    blueturtle
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.