Styling the ul Element

Styling the <ul> Element

Most browsers display HTML lists with left indentation. To set this indentation, some browsers use padding (Firefox, Netscape, and Safari), and others use margins (Internet Explorer and Opera).

To remove this left indentation consistently across all browsers, set both padding-left and margin-left to 0 on the <ul> element as shown in Listing 15.3.

Listing 15.3. CSS Code for Zeroing Margins and Padding

ul#navigation {     margin-left: 0;     padding-left: 0; } 

To remove the list bullets, set the list-style-type to none as in Listing 15.4. The results of the CSS style rules are shown in Figure 15.2.

Listing 15.4. CSS Code for Removing List Bullets

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

Figure 15.2. Screenshot of list with the <ul> element styled.