css horizontal menu separator not showing in IE8

The separator is showing in chrome, but not in IE8, but in design mode it does

Other issue is that the border-left of the last child (Username) that is suppose to not showing the separator is showing it.

Chrome view:

Orders | Manual Orders |                              Username

HTML Code:

<div id="navigation">
    <ul>
        <!-- Menu Items -->
        <li><a href="#">Orders</a></li>                              
        <li><a href="#">Manual Orders</a></li>                                               
        <!-- Username Information at the right side of the menu items  -->  
        <li style="float:right;padding-right:10px;color:#fef4f3;font-size:14px;">
            <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
        </li> 
    </ul>
</div>

CSS:

#navigation
{
    float: left;
    width: 960px;
    background: #656565;    
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 1px 5px;
    color: #fff;    
    font-size: 14px;    
    border-right: 1px solid#fff;
}

#navigation li a:hover { 
    background: #f5625b; 
}

#navigation li:first-child a
{
    border-left: none; /*To remove first left separator*/
}

#navigation li:last-child a
{
    border-left: none; /*To remove last left separator*/
}

Any idea of what could be wrong here?

Answers


IE is very strict with spaces between values of shorthand properties. While other browsers such as Chrome and FF will parse the above just fine, IE will ignore it.

border-right: 1px solid#fff;

should be:

border-right: 1px solid #fff;

Need Your Help

Empty/blank drop down, android custom search suggestion

android database widget search-suggestion

I have a simple search widget and I have a hard time implementing the custom search suggestion function into my app.

How to prevent background scroll when bootstrap modal is open

jquery html css twitter-bootstrap

I'm using Bootstrap v3.0.2. Want to disable background scrolling when a modal is open. I tried: