Again: CSS, UL/OL: Incorrect indent with custom co

Question

I described my original problem in this thread.
In short, when using custom counters in ULs, the text indentation broke.
Marc Audet proposed a very elegant solution which I implemented in our code.

Now - not surprising - this does not work if the list is supposed to float around images :-(

You can see the problem here: http://cssdesk.com/eEvwn

The numbers are lying on top of the image. Again: no surprise, they are absolutely positioned after all.

So. Is there a way to fix this, or do I have to make my client unhappy by telling him it's technically not possible?

Thank you again for taking the time to answer.

If you need more info, please let me know.

Answer 1

I guess from the CSSdesk that you post that you want the indentation to be similar to what shows in the bottom panel.

First, you want the numbers to be off the text. You can get this by setting a margin-left that matches the width:

ol.wrong li:before {
    ....
    width: 20px;
    margin-left: -20px
}

ol.wrong ol li:before {
    width: 40px;
    margin-left: -40px;
}

Since the margin left is the same amount than the width, it doesn't take space.

And, to adjust the global position, set:

ol.wrong ol li {
    margin-left:15px;
}

In your original code, this is margin-right. I would say that this is an error, doesn't seem to make sense to adjust the margin right

Answer 2

I revisited my previous solution and made some modifications to the CSS as follows.

For the top-level list:

ol.custom {
    margin-left: 0;
    padding-left: 0px;
    counter-reset: counter_level1;
    list-style: none outside none;
    display: block;
    line-height: 18px;
    width: 500px;
}
ol.custom li {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 20px;
    outline: 1px dotted blue;
    overflow: hidden;
}
ol.custom li:before {
    display: inline-block;
    width: 20px;
    margin-left: -20px;
    content: counter(counter_level1)". ";
    counter-increment: counter_level1;
    font-weight: bold;
}

and for the nested list:

ol.custom ol {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    counter-reset: counter_level2;
}
ol.custom ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 0 40px;
}
ol.custom ol li:before {
    display: inline-block;
    width: 40px;
    margin-left: -40px;
    content: counter(counter_level1, decimal)"." counter(counter_level2, decimal)". ";
    counter-increment: counter_level2;
}

Essentially, I removed the absolutely positioned pseudo-elements since those will not work near floated content.

However, because of the negative-margin for the pseudo-elements, the labels could still overlap the floated images, so add overflow: hidden to the top level li style and this creates a new block formatting context which takes care of the over lap issue.

Downside: depending on your content and the floated image, you can get some large chunks of white space as shown in my new demo:

http://jsfiddle.net/audetwebdesign/buXKy/