Tutorial 5 - Floating next and back buttons using lists

Step 3 - Remove padding and margins

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, set both padding and margins to "0" for the "UL".

Go to Step 4 →

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


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

HTML CODE
<p>
Lorem ipsum dolor sit amet...
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
Other Max Design articles and presentations
Associated with webstandardsgroup.org