Many years ago designers overlooked an important piece of the pie known as efficient web design - the use of lists. As the years progressed, this overlooked portion began to take shape as an art form and started to show the world the power it could harness to make the web a more manageable place.

With that mouthful, let us move on to see how we can use CSS to nest lists!

First and foremost - keep your list CSS in one CSS file

One issue I’ve seen from working with premade layouts is that some have various stylesheets and each have classes and selectors pertaining to the same list items. In reason, it can be assumed that you may want to seperate these stylesheets to operate with different browsers (such as IE6 or IE7 while using the and conditional statements for Internet Explorer 7 and Pre Internet Explorer 7 respectively). However, there really shouldn’t be a big hassle between the browsers in terms of lists. For example:

body {}
ul
{
list-style:square;
}
/*We shall create css to format interior lists, going 3 deep from the root*/
ul li ul,
ul li ul li ul,
ul li ul li ul li ul
{
padding-top:10px;
list-style: url('../images/mapbrack.gif');
}

In our css, we have defined styles for ul selector. From there we have moved on to specify styles for more intense DOM structure, such as nested lists.

The HTML could look like the below example:

<ul>
<li><a href="#"><a href="#">Test</a></a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test Group
<ul>
<li><a href="#">Inner Test 1</a></li>
<li><a href="#">Inner Test 2</a></li>
<li><a href="#"> Inner Test 3
<ul>
<li><a href="#">Inside Inner Test 1
<ul>
<li><a href="#">Last Test 1</a></li>
<li><a href="#">Last Test 2</a></li>
<li><a href="#">Last Test 3</a></li>
</ul>
</a></li>
</ul>
</a></li>
<li><a href="#">Inner Test 4</a></li>
</ul>
</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>

As you can see we have did quite a number on nested lists. Not only do we have one nested list, but we have created nested lists within nested lists that will gracefully stretch across IE, Firefox, and Safari. The result is that you have optimized your css to limit the amount of code to render and produce the same result. You can look at it as trimming the fat off of the CSS, or you can look at it as just one small step in saving resources.

Here is a listing of XHTML tags that I’ve kept as a reference for a long time. I figure if they were a great resource when I was learning XHTML, then they can be a great resource for you as well.

*Original credit goes to http://www.w3schools.com/tags/default.asp*

XHTML Tags, Description and Document Type Declaration

While scoping Simple Bits the other day I saw that the new MTV.com has officially launched. Granted, I was a huge MTV fan growing up. The web experience though, for years, has simply sucked. Engineered predominantly as a Flash based broadband beast, it kept a lot of dialup users from enjoying the experience (i.e. ME).

Fortunately Dan Cederholm and Simple Bits have put the power of XHTML and CSS to use and have really cleaned up MTV.com. No more do I have to wait 5 minutes for anything to load. It’s clean, it’s simple and it still has that MTV feel. Great job guys!

Plain and simple - web standards the evolution of keeping things simple is finally getting some mainstream attention. What is even more astonishing is that there are a lot of people that don’t even realize it.