display: inline; - problems with IE!!

[austint01]

hi, I am having problems with nav list

It displays inline on firefox but not in IE..but I can not see why? any ideas??

thanks

PHP Code:

    /* NAV */

    #nav {
        width: 420px;
        height: 70px;
        float: right;
        margin: 0;
        padding: 0;
    }

    #nav li.on ul, #nav li.off ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
        text-decoration: none;
    }

    #nav li { /*float the main list items*/
        margin: 0;
        float: right;
        display: inline;
        padding-right: 0px;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    .noback {
        background: none;
    }

    #nav li ul {
        display: none;
        float: right;
    }
    
    #nav li.off ul, #nav li.on ul { /*put the subnav below*/
        position: absolute;
        top: 88px;
        *top: 104px;
        left: 503px;
        padding-top: 10px;
        height: 28px;
        width: 420px;
    }

    #nav li a {
        color: #155089;
        font-size: 20px;
        display: block;
        height: 15px;
        padding: 10px;
        
        background-position: 0 10px;
    }

    #nav li.on a {
        color: #000;
        background-position: 0 10px;
    }

    #nav li.on ul a, #nav li.off ul a {
        float: left; /*ie doesn't inherit the float*/
        border: 0;
        color: #C1D1E0;
        width: auto;
        margin-right: 0px;
        font-size: 18px;
        line-height: 0px;
        background: none;
    }

    #nav li.on ul {
        display: block;
        background: none;
    }

    #nav li.off:hover ul {
        display: block;
        z-index: 6000;
        background: #fff;
    }

    #nav li.off a:hover, #nav li:hover a {
        color: #000;
        background: #fff;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    #nav ul li.off a:hover, #nav ul li:hover a {
        color: #000;
        background: none;
    }
    
    ul#nav li.off ul li, ul#nav li.on ul li {
        background-image:none;
    }
    
    ul#nav li.off ul li a:hover, ul#nav li.on ul li a:hover {
        background-image:none;
    }
    
    ul#nav li.on a.nopipe, ul#nav li.off a.nopipe {
        background-image:none;
    }

    /* END OF NAV */ 


and the html

PHP Code:


<div id="divnav">
        
        <ul id="nav">
        
        <li class="off"><a href="#">contact</a></li>
        
        <li class="off"><a href="#">products</a>
            <ul>
            <li><a href="#">testemonials</a></li>
            <li><a href="#">samples</a></li>
            </ul>
        </li>
        
        <li class="off"><a href="#">about us</a>
            <ul>
            <li><a href="#">processes</a></li>
            <li><a href="#">plant list</a></li>
            <li><a href="#">benefits</a></li>
            <li><a href="#">features</a></li>
            </ul>
        </li>
        
        <li class="on" style = "background-image:none;"><a href="#" class = "nopipe">home</a></li>
        
        </ul>
        
        </div> 


thank you

[JamieR]

Just a long shot but are you sure you are clearing the div underneath the nav div as you are floating it...

[austint01]

it was a missing width in a tag.. I have asome relative poistioning probs now