How to Create Beautiful and Elegant HTML Lists Using CSS

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries.

This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.

Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or •, ») for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list.

It turns out that IE applies default left side margin to the list container (<ul> and <ol>) while standards aware browsers apply left side padding. These differences in list rendering force us to set both padding and margin of <ul> to 0 and continue to work only with styling <li> tag.

Another thing we notice is that list bullets or numbering becomes invisible in IE with the left side margin set to 0.

Getting the list rendering consistent among all browsers

To solve the invisible bullet problem described above, its a good idea to use relative positioning of list containers <ul> and <ol>. By doing so, we will be able to create much more advanced list style later without repeating most of the CSS.

Internet Explorer specific CSS

To fix IE’s ability to do the math correctly, we have to enable hasLayout property for all of our <ul> and <ol> tags. This is done by using conditional comments:

ul, ol { height:0; overflow:visible; }
ul, ol { height:1%; }

Output

List is now rendered equally in all browsers. For illustration purposes a yellow background is applied to the list container <ul>, gray border shows the dimensions of <ul>, while list items <li> have gray background.

Flat lists for more content per list item

Sometimes you have multiple lines of content per list item and then it might be reasonable to align the lists with the rest of the content in order to sustain the vertical flow of it.

CSS:

Although the alignment of the list image is not pixel perfect among all of the browsers, it is more than satisfactory if the height of the bullet image doesn’t exceed 10 pixels. One might suggest to use background of <li> tag as a list bullet image, but this would brake the ability to combine multiple CSS identifiers per list, like <ul class="flat bullet-a"> because of inherited margin settings.

All the small details

Notice that the spacing between list items in the last example (rounded image bullets) is larger than the default one (arrow image bullets). This enhances readability and separates list items similarly to paragraphs. So here is the final set of CSS styles to suite most of the needs:

Screenshot showing the use of various HTML list styles

Internet Explorer specific HTML and CSS

Few suggestions:

Bullet image height preferably should not exceed 10 pixels. Lower image height makes them look better in Internet Explorer. If you want bullet images to be transparent, save them as transparent GIF or 8-bit PNG files.

You might find it useful to apply this styling only to your post content, which can be easily done by prepeding the identifier of your post wrapper (like .post or .article) to all of the list styles. The end result would be something like .post ul, .post ol {}.

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.

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:

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.

One thing that I’am not find a solution for is the line (empthy) over the list. I often want a heading, then list all the items under, without a empthy line… Show example below, no space between “Like this:” and “- Hi”.