httpremix.com

About the Author

Jonah Ellison lives in Seattle, Washington and works at a web firm developing websites and custom web applications for the LAMP solution stack. He enjoys optimization, front-end usability, databases, clean code and clever solutions. Contact him or learn more.

 

Topics

Related Articles

CSS: How to Style Perfect HTML Lists (<ul><li>, <ol><li>…) 2008 Apr 30

Topics: css — by jonah ellison
Here is an example of a default HTML list with no CSS styling:
  • This is what I consider an ugly HTML list.
  • Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
  • There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
    • Spacing Issues:
      1. There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
      2. The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
    • Custom bullet images: Incorrect alignment across browsers.
  • Let's fix this.
Here is an example of a styled HTML list:
  • This is what I consider a beautiful HTML list.
  • Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
  • There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
    • Spacing Issues:
      1. There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
      2. The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
    • Custom bullet images: Incorrect alignment across browsers.
  • Let's look at the code, shall we?

CSS copy to clipboard
  1. ul.niceList {
  2.   margin-left:0em;
  3.   padding-left:0.2em;
  4.   margin-bottom:1em;
  5. }
  6. ul.niceList li {
  7.   background:url(images/bullet.gif) 0em 0.5em no-repeat; /* change background em accordingly */
  8.   padding-left: 0.8em;
  9.   list-style: none;
  10. }
  11. .niceList ul li { background-image:url(images/bullet_child.gif); }
  12.  
  13. ol.niceList li, ul.niceList li { margin-bottom:0.5em; }
  14.  
  15. ol.niceList {
  16.   margin-left:1.5em;
  17.   padding-left:0px;
  18. }
  19. .niceList ol li {
  20.   list-style:decimal;
  21.   background-image:none;
  22.   padding-left:0em;
  23. }

Do not use list-style-image! This property is not cross-browser friendly and has alignment issues. Take a look below:

list-style-image.png

Firefox aligns the bullets too south, while IE7 aligns them too north, and neither is centered. WTF?!! The alternative is "background," which gives us more control and predictability.

If you just want to remove the left margin and add padding between list items instead using a customized bullet image, less code is needed:

CSS copy to clipboard
  1. ul, ol { margin-left:1.5em; padding-left:0px; }
  2. li { margin-bottom:0.5em; }

Download Example & Source


9 Comments »

1. Pingback by A Different Approach to Writing CSS // httpremix.com – 2008 May 4 @ 8:51 pm

[…] happens when we need to override how the core <ul> and <li> elements display (e.g.: How to Style Perfect HTML Lists) but didn’t “reset” the list in our CSS? (Did you catch how ul.navMain li { … } is missing […]

2. Comment by Brendan – 2008 September 17 @ 8:17 pm

Great tips. Just what I was looking for :)

3. Comment by Martijn – 2008 October 3 @ 3:39 am

Thanks. Just what I needed, and with good examples as well.

4. Comment by xz – 2008 November 14 @ 10:57 pm

Nice, thanks a lot..the problem with IE has been bugging me since yesterday…

5. Comment by Brad – 2009 March 19 @ 9:02 am

Thanks! This is exactly what I’m looking for to dress up our company Intranet.

6. Comment by bitkahuna – 2009 April 22 @ 8:40 am

great article. kept is simple, with great results. thanks. i’ve been going nuts with lists between IE6, IE7, IE8 and FF!

7. Comment by Jos best – 2009 November 23 @ 5:52 am

I want have a solution of the next list problem:
MainItemgroup
1.SubItemgroup
—-1. MilkProducts
——– 1.1 cheese
——– 1.2 butter
——– 1..3 Milk
———— 1.3.1 Fat 3%
———— 1.3.2 fat 1%
—-2. article
——–2.1 article
———— 2.1.1 article
———— 2.1.2 article

subItemgroup 2
…….

Thanks

8. Comment by gloria – 2010 March 1 @ 10:22 am

I like this site

9. Pingback by Customizing Indentation for Bullets | Discover – 2010 May 19 @ 11:01 pm

[…] Read more here : How to Style Perfect HTML Bullets […]


Leave a comment

RSS feed for comments on this post - TrackBack URL