Elliott Elliott - 5 months ago 10
CSS Question

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?

Answer
#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;  
}
Comments