Search code examples
csshtml-listsalignmentindentationtext-alignment

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

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:

List Misalignment

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

Solution

  • 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.