HOME FORUM ARTICLES TUTORIALS SCRIPTS LINKS NEWS MENTORS TOOLS REGISTER

Safe Lists Next to Left-Floated Elements

An article by ERT Mentor GrandSchtroumpf

Table of Contents

1. Introduction
2. Let's make it as solid as possible
3. First impressions
4. Marker outside
5. Trying a trick to create the indentation
6. Background image as marker
7. Final conclusion

1. Introduction

There are lots of different methods to format nice html lists. But are those methods reliable in all contexts and in all browsers?

In this article, we'll have a look at a simple context: a list with some left-floated element next to it.

I came across this issue when trying to define some generic CSS for this site. In this layout, each "section" consists of an image that can be floated and some wrapping content that can only contain paragraphs (P), unordered lists (UL) or ordered lists (UL).

The typical problem we get when using left-floated elements is that the margin-left and padding-left of the "wrapping content" are ignored when they are less than the width of the floated element. This might sound a little abstract at first... We'll use simple examples here after.

The examples use a left-floated element with a blue border.

The examples use some gray background on the LI so we can easily identify their boundaries.

2. Let's make it as solid as possible

We specify a zero margin and padding on both UL and LI elements to override the browsers' default values. We specify the marker's position to be "inside".

CSS:

ul, li {
  margin: 0;
  padding: 0;
}

ul {
  list-style-position: inside;
}

Result:

3. First impressions

Some browsers do not correctly wrap the content of individual list items.

From what i understand, the specs specify that list items should behave like block-level elements but with an additional marker. That means the list items should span on the complete width of their parent. That's not exactly what we get in all browsers.

Among the browsers i have tested, Opera and IE format list items correctly. Firefox and Konqueror use some strange box-model... a little bit like if the list items were floated, but still spanning on the complete available space to the right. Pay attention to the gray background on the screen captures here under.

Screenshot in Opera (correct wrapping):

Screenshot in Firefox (incorrect wrapping):

Conclusion

This is already a bad start. We must conclude that using lists (especially lists with long list items) next to left-floated elements is to be avoided until the mainstream browsers format them correctly. But it's not a major issue since all the content, marker included, is visible in all browsers.

Other than that, this code formats more-or-less as expected in all the browsers i have tested (Firefox 2.0, Konqueror 3.5.2, Opera 9.0, IE 6.0).

4. Marker outside

When using an outside marker, we typically want the lists to appear with some "indentation" compared to text paragraphs. To do that, we have a few different options:

• Set some padding-left on the UL
• Set some margin-left on the UL
• Set some margin-left on the LI

The problem is that this "indentation" is not kept in the presence of a left-floated element.

CSS:

ul, li {
  margin: 0;
  padding: 0;
}
ul {
  list-style-position: outside;
  margin-left: 2em;
}

Result:

Note for Firefox:

If, instead of using a margin/padding on the UL we use a margin on the LI, then Firefox shows the indentation. That's not proper behavior. And since there is no way to reproduce something similar in other browsers, we can consider that to be a valid solution.

li {
  margin-left: 2em;
}

Conclusion

When using an outside marker, the formatting is consistent only when the list has no "indentation" (no margin-left and no padding-left on neither the UL nor the LI).

We also must make sure the left-floated elements have a margin-right that is big enough to leave enough space for the marker.

5. Trying a trick to create the indentation

We can try to trick the browser by using relative positioning to create the "indentation". This is not supposed to work according to the official specifications. It's only meant to be used as an illustration, it's definitely not a valid solution.

CSS:

ul, li {
  margin: 0;
  padding: 0;
}
li {
  margin-right: 2em;
  position: relative;
  left: 2em;
}

Result:

Screenshot in Opera:

Conclusion

It works in Firefox and Konqueror, due to the wrong box-model assigned to the list elements.

Opera does not keep the indentation. That's the expected behavior for a block-level element. And, let me repeat it once again, list-items are supposed to format like block-level elements.

IE keeps the indentation, but for some obscure reason, the marker disappears.

This attempt is a complete failure.

6. Background image as marker

A popular technique is to use a background image as marker replacement. Do you really think we'll get better results with that?

CSS:

ul, li {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  padding-left: 25px;
  background-image: url(http://www.expertsrt.com/images/marker.png);
  background-position: 10px center;
  background-repeat: no-repeat;
}

Result:

Screenshot in Opera:

Conclusion

Here again, it works in Firefox and Konqueror, due to the wrong box-model assigned to the list-elements.

The expected behaviour is to see the background image under the floated element. That's what we get in Opera and IE.

This attempt is also a complete failure.

7. Final conclusion

My main concern being the solidity of the code and cross-browser compatibility, the only solution i found that meets these two criteria is to use an inside marker with no margin-left and no padding-left.

Many sites make a lot of fuss over pretty lists. But only the most simple list styling works nicely next to left-floated elements.

Having to chose between pretty lists and something as basic as left-floated elements is quite ironic... or maybe i have missed something.

This page is licensed under a Creative Commons Attribution 2.5 License
© Copyright GrandSchtroumpf 2006-2007

Search ERT on the Tools Page