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; }