Feature
Post

Category
Code


Consistent List Markup

Web standards are here to stay, and with this comes the need for semantic markup. One of the main items of any website is the navigation, in essence a list of links, so it is only right that they should be marked up with a lovely unordered list. Every site I work on now has the main navi (and the sub navi of course!) marked up as a list. I have become very familiar with crafting pretty looking menus with the strong underlying backbone of an unordered list. Trouble is under certain circumstances I find my list gets a little out of control with the amount of whitespace it likes to display.

Let’s start off with some nice clean list markup.

<ul>
	<li><a href="#">One</a></li>
	<li><a href="#">Two</a></li>
	<li><a href="#">Three</a></li>
	<li><a href="#">Four</a></li>
</ul>

Im sure you are all pretty familiar with an unordered list, so I will spare you the details, next up let’s add some simple styling, as you would if you wanted to make a nice navi.

ul {
	margin:0;
	padding:0;
	list-style:none;
}
	ul li {
		margin:0;
		padding:0;
		display:inline;
	}
		ul li a {
			margin:0;
			padding:0;
			background-color:#ccc;
		}

Pretty simple CSS there, I set margin and padding to 0 on everything to more easily reveal the extra white space. Now let’s turn this simple vertical navi into a horizontal one. Simply add display:inline; to the list elements. Preview this new horizontal wonder in your favourite browser and you will see some mysterious whitespace between the anchor elements. This phenomenon is also displayed in this screen shot (flickr).

There you have it, space between elements that have no margin or padding!

Ok, so thats all well and good, you might even be able to cope with the extra whitespace that is being chucked in here but I like my CSS to be a bit more precise, so I’ll show you how to sort this problem.

Try out the following code in your favourite browser.

<ul><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li><li><a href="#">Four</a></li></ul>

As if by magic, the white space will be gone! Basically all you need to do to remove those pesky gaps is to write your list on one line and one line only. Trouble with writing the code all on one line is it looks awful. As an alternative, you can drop the last angle bracket (>) on each line, and put it at the start of the following line, as shown on the online demo page, make sure you view the source.

So there we have it, a consistent way of marking up unordered lists. I find I use this technique a lot when working with horizontal navigation. It can also help when using anchors displayed as block, where IE has some issues with how much white space it wants to show.

View the demo page of this technique.

Authors Note: This article was originally published at blog.critical some parts of the article have been tweaked for use here on Devlounge.


  1. By Ben Debnam posted on July 19, 2006 at 4:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great article Andy, thank you!

  2. By Johan posted on July 20, 2006 at 11:32 am
    Want an avatar? Get a gravatar! • You can link to this comment

    You could apply float:left on the li, this removes the whitespace for the first example which has the default whitespace.

  3. By Johan posted on July 20, 2006 at 12:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Also you have to keep in mind to clear any floats, if necessary. Various methods can be used for this.

  4. By Andy Pearson posted on July 20, 2006 at 1:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Very true Johan, there are numerous methods to remove the white space, and most of the time you will be doing something much more complex with the list anyway, so floating left or right shouldn’t be a problem.

    Using floats can get complicated, and I’m pretty sure (though happy to be proved wrong!) that you could not use floats to create a horizontally centered list. This article served as a way to get the technique “out there” and hopefully it will help someone!

    I’m glad you read the article, and glad it got you thinking!

  5. By Johan posted on July 20, 2006 at 2:59 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Have a look here for centered floated menus:

    - 2 examples (with known width or no width)

    http://cssplay.co.uk/menus/centered.html

  6. By Johan posted on July 20, 2006 at 3:39 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    if ever need to make a centered floated menu for IE 5 MAC (a rare case)

    http://www.brunildo.org/test/NavBar2.html
    (example 9}

  7. By aj posted on July 20, 2006 at 5:14 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the additional resources Johan

  8. By Aaron Bassett posted on July 21, 2006 at 9:03 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I’ve encountered this problem alot in IE when creating navigation menus. And my prefered method of writing up my lists to remove whitespace is like:

    <ul
    ><li><a href=”#”>One</a></li
    ><li><a href=”#”>Two</a></li
    ><li><a href=”#”>Three</a></li
    ><li><a href=”#”>Four</a></li
    ></ul>

    same principle as your post but I just find the structure easier to read as it is closer to the normal list structure.

  9. By Andy Pearson posted on July 22, 2006 at 6:27 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Yup, if you look at the source file, you can see this method, it is also described at the bottom of the article, trouble is the markup display plugin over here on Devlounge seems to render it all in one line for some reason.

    And your right, it does help solve alot of IE quirks, I seem to remember it is triggered when you set the internal anchors to display block.

  10. By aj posted on July 22, 2006 at 7:11 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Fixed it for you. The code plugin breaks everything down by where the line breaks are, so it didn’t seperate the code like it should have. Stupid thing :P

  11. By Andy Pearson posted on July 29, 2006 at 5:24 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Cheers AJ, though the code is now incorrect, the markup must be all in one line to remove the whitespace, i edited it and put it back to the way it was.

  12. By aj posted on July 29, 2006 at 5:43 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Ahh opps, nvm, I’ll leave stuff alone now. Sorry about that

  13. By Cosiu posted on December 18, 2006 at 12:53 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Does anybody knows out there how to qsort an unordered list..?

    all best

  14. TrackbackLife Update | blog.critical