CSS: Why is the indentation of these list elements not lining up?

Question

I've got a simple CSS issue on my hands here —or so I thought…— where I basically just want to create a nicely left aligned list (ul) using ::before pseudo elements with generated content: "» " as list markers.

Now matter what I try though I simply cannot reproduce the results from this A List Apart: Taming Lists article. In the linked to example the list is exactly how I'd like to style mine.

I have reproduced the example in a JS Fiddle here which shows the issue of the misaligned text: http://jsfiddle.net/jannis/f8TxN/

Here is also a quick image to illustrate this point better. Example from ALA on the left, my version on the right:

However as you will be able to see in the Fiddle, the first line within the li simply will not align left with the rest of the text within this li.

I would really appreciate someone taking a look and telling me what I'm doing wrong here.

Many thanks for reading,

Jannis

Answer 1

It's the text-indent: -1em; on the <ul> that is causing the issue. Setting it to a fixed value of -13px fixes the fiddle.

However, depending on the width of the generated content, which is particularly affected by the font-size used, you may need a different value if you want to continue using an em value. px is not related to the current font.

The text-indent was only added so that the text would appear to be aligned because the author knew that there would be generated content that would push the first line forwards. I assume the value chosen fitted the original article on whatever browser and font was being used.

Copying the following CSS (from the ALA article) into the fiddle font-family: Verdana, sans-serif;font-size: 11px; corrected the alignment in my browser.

Answer 2

To my eyes, even the ALA version is a (few?) pixels out and nowhere near perfect, although they have the opposite issue to you, where the text on the first line is further in than the rest.

I got your example to work by changing the following from -1em to -0.85em:

text-indent: -0.85em;

Even with a different font-size, this still worked.

It looks like the width of the character(s) used are also taken into account, so the reason for the difference between your example and ALA could even be down to the font used.