Selectors in action - step by step tutorial

10 - styling the <ul> element

10.1 List style

For this tutorial, we will use a rollover navigation system. To do this we will use a series of descendant selectors - starting with the <ul>. First off, we have to remove the HTML list bullets by setting the "list-style-type" to "none".

div#navigation ul
{
list-style-type: none;
}

10.2 Margin and padding

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation. To remove this left-indentation consistently across all browsers, the best method is to set both padding and margins to "0" for the <ul>.

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

View step 10 »

Go to Step 11 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org