Comments on: How to Create Beautiful and Elegant HTML Lists Using CSS

By: thinkweird

thinkweird — Mon, 12 Jan 2009 14:33:14 +0000

I popped into this page to find a solution to increase the spacing between the list items.

Yes, you have it at the bottom. But how to use it?

I copied the “.spaced” part into my style.css but nothing happened.

By: » 10 Articles That Inspired Me In 2008 - The Mindnaked Studio Blog

» 10 Articles That Inspired Me In 2008 - The Mindnaked Studio Blog — Mon, 12 Jan 2009 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSS [...]

By: 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net

9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net — Fri, 12 Sep 2008 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSS [...]

By: Kaspars

Kaspars — Sat, 12 Jul 2008 14:33:14 +0000

George, I agree that this might be a simple solution for cross-browser consistency, but this way one looses all the semantics. I guess it wouldn't really matter for an end-user, but search engines might consider lists a better representation of a site navigation as they group the elements and make them semantically relevant. Or it's maybe my inner standardista thinking.

By: George

George — Sat, 12 Jul 2008 14:33:14 +0000

I’ve abandoned the use of unordered lists altogether whenever possible. They never display consistently across all browsers.

I surround content in a div, then then put each line item in another div with a bullet background image that doesn’t tile and is positioned correctly with respect to the line. Line-height can help too for line items that break the line. It sounds complex but in fact it’s much easier and consistent across all compliant browsers. Here’s an example:

div.list div {padding: 3px 0px 3px 7px; background-image:url(‘http://www.whatever.com/image.gif’); background-repeat:no-repeat; background-position:0 9; line-height:13px;}

Once you get the styles down it’s as easy as:

Item 1

Item 2

By: Tractament de llistes amb CSS - blog.esbudellat, esbudellant estàndards

Tractament de llistes amb CSS - blog.esbudellat, esbudellant estàndards — Thu, 12 Jun 2008 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSS [...]

By: Mihajlo

Mihajlo — Mon, 12 May 2008 14:33:14 +0000

Excellent post, this helped me a lot. Thank you taking the time to share your findings with everyone!

By: Pat Rees

Pat Rees — Sat, 12 Apr 2008 14:33:14 +0000

I have found that if you want to get everyone playing nicely it also helps to reset the property for

text-intent: 0;

By: Best of Week (+/-) #1 | Insel der Engel'

Best of Week (+/-) #1 | Insel der Engel' — Wed, 12 Mar 2008 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSS [...]

By: Dennison Uy

Dennison Uy — Wed, 12 Mar 2008 14:33:14 +0000

Personally I prefer resetting lists in general and just styling them individually, makes it easier to style menus and content lists that way.

By: Preparatevi ad un pieno di risorse!! | Italian webdesign

Preparatevi ad un pieno di risorse!! | Italian webdesign — Wed, 12 Mar 2008 14:33:14 +0000

[...] da Konstructors: Come creare liste belle ed eleganti usando i css [...]

By: Urls Sinistras » del.icio.us entre 18/02/2008 e 05/03/2008

Urls Sinistras » del.icio.us entre 18/02/2008 e 05/03/2008 — Wed, 12 Mar 2008 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSSThis article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents. [...]

By: Dave

Dave — Wed, 12 Mar 2008 14:33:14 +0000

Great post, I’m going to put this into action on a current project. I really appreciate when authors take the time to outline differences between browsers when writing posts like this — without that, posts like these would be pretty useless.

By: Fatih Hayrioğlu’nun not defteri » 01 Mart 2008 web’den seçme haberler

Wed, 12 Mar 2008 14:33:14 +0000

[...] CSS ile listeler üzerine ayrıntılı bir makale. Bağlantı [...]

By: Tractament de llistes amb CSS - a.css, esbudellant estàndards

Tractament de llistes amb CSS - a.css, esbudellant estàndards — Wed, 12 Mar 2008 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSS [...]

By: Great Resources Elsewhere: February 22 to February 29 - CSSnewbie

Great Resources Elsewhere: February 22 to February 29 - CSSnewbie — Wed, 12 Mar 2008 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSS — Konstruktors Notes [...]

By: Como crear listas HTML atractivas usando CSS — Tablosign

Como crear listas HTML atractivas usando CSS — Tablosign — Wed, 12 Mar 2008 14:33:14 +0000

[...] Como crear listas HTML atractivas usando CSS [...]

By: CSS Ninjitsu Links | dBlogIt by Dustin Boston

CSS Ninjitsu Links | dBlogIt by Dustin Boston — Wed, 12 Mar 2008 14:33:14 +0000

[...] How to Create Beautiful and Elegant HTML Lists Using CSS — Konstruktors Notes HTML list have become one of the most used elements for marking-up various semantic content structures — navigation, comments and [...]

By: lktree

lktree — Wed, 12 Mar 2008 14:33:14 +0000

Your example page is almost completely broken in IE7. Maybe because of a typo in your head section:
< ![endif]–>

There should be no space in the final ;< ![endif]–>

By: Jenny

Jenny — Wed, 12 Mar 2008 14:33:14 +0000

Pretty neat. I’m still learning the list stuff, but this helps a lot. :)