Sams Teach Yourself CSS in 10 Minutes

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