CODEWITHSUNDEEP
cssxhtml
Elliott
Elliott

Reputation: 3864

list doesnt display inline IE?

The code below works fine in firefox, but the list doesnt display in-line with IE.

<div id="nav">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>

CSS:

#nav
{
    width: 800px;
    padding: 0px; 
    margin: 0 auto; 
    list-style-type: none;  
}

#nav ul li a 
{
    font-size: 18px;    
    text-decoration: none;   
    text-align: center;  
    color: #ffffff;   
    background-color: #003366;   
    padding: 20px;
    list-style: none;
    float: left; 
    list-style-type: none; 
    line-height: 5px; 
    display: inline; 
    margin-left: 5px; 
}

#nav ul li a:hover 
{
    background-color: #ccc;
}

Also in IE the bullet points still display?

Upvotes: 1

Views: 4242

Answers (3)

o.k.w
o.k.w

Reputation: 25790

#nav
{
    width: 800px;
    padding: 0px; 
    margin: 0 auto; 
    list-style-type: none;  
}

#nav ul li
{
    text-align: center;  
    background-color: #003366;   
    list-style: none;
    list-style-type: none; 
    margin-left: 5px; 
    display: inline; 
    float: left; 
}

#nav ul li a 
{
    font-size: 18px;    
    text-decoration: none;   
    color: #ffffff;   
    line-height: 5px; 
    padding: 20px;
    display: inline-block; 
}

#nav ul li a:hover
{
    background-color: #ccc;  
}

Upvotes: 0

X-Istence
X-Istence

Reputation: 16667

You are putting list-style-type on your div but not on your ul element. list-style-type is not inherited from non-list items in IE.

Upvotes: 1

Robert Massa
Robert Massa

Reputation: 4608

I think you problem is that you put the CSS on the #nav ul li a, and this should be on the #nav ul li element.

Check this article for a very good explanation on list-styling. The section about inline lists should be of particular interest to you.

Upvotes: 1

Related Questions