CSS div nowrap not working in IE

Question

i'm building a fluid navigation in css, using the iscroll js lib. Now everything's smooth in firefox and chrome. The only problem is with ie.

So basically i'm having a fluid div, which i dont want to wrap or break. In ie it breaks.. i'm using the white-space: nowrap css attribute.

compatibility only for ie8+.

the html code:

        <div id="nav">
            <ul class="navigation">
                .. many li tags with a tags inside ..
            </ul>
        </div>

the css:

.navigation {
    display: inline-block;
    list-style: none;
    border-right: 1px solid #576a85;
    border-left: 1px solid #3e506c;
}

and

.navigation li {
    float: left;
}

.navigation a {
    display: block;
    text-align: center;
    padding: 10px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    border-left: 1px solid #576a85;
    border-right: 1px solid #3e506c;
}

some screens of the behaviour:

(chrome)

(ie)

Thank you for your help!

Answer 1

Ok, i got the problem now.

the li element has to be inline-block instead of float left and the ul whitespace nowrap ... this way it will be rendered fine in ie.