Styling the <li> Element

Styling the <li> Element

You might notice that there are slight gaps between list items in some versions of Internet Explorer for Windows or Opera. This can be overcome by setting the <li> element to display: inline (see Listing 15.13).

Listing 15.13. CSS Code for Setting display: Inline on the <li> Element

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

ul#navigation a
{
    display: block;
    text-decoration: none;
    background: #036;
    color: #fff;
    padding: .2em .5em;
    border-bottom: 1px solid #fff;
    width: 7em;
}

ul#navigation a:hover
{
    background: #69C;
    color: #000;
}

ul#navigation li
{
    display: inline;
}