Hi Folks,

I've been a lurker here for almost a year now, following the "Test your CSS Skills" quizzes with glee, as they have solved many CSS conundrums for me.

I've run into a real stickler that should be a "Test your CSS Skills #"; it is a surprisingly difficult effect to achieve. I've found a few approaches that work in tiny examples, but not anything that works in the full page layout that I need: a series of nested numbered lists indented on the left and aligned on the right. And finally, the layout must be printable. For the sake of completeness, I will enumerate the approaches I have found so far in the wild:

1) Use a graphical dot as a repeating background.
2) Insert a pseudo element filled with the desired leader dot character.
3) Place a dotted border on an element in the layout.

This last approach seems the most promising, as it can be used with tables and lists. Here is a list example:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" type="text/css" href="/css/normalize.css">
            <link rel="stylesheet" type="text/css" href="/css/result-light.css">     
            <style type='text/css'>
ul.leaders {
    list-style: none;
    margin-top: -0.3em;
}
ul.leaders li {
    height: 1.2em;
    display: block;
    border-bottom: 1px dotted #000;
}
ul.leaders .description,
ul.leaders .price {
    display: block;
    margin: 0.3em 0 -0.3em 0;
    background: #fff;
}
ul.leaders .description {
    float: left;
    padding-right: 0.2em;
}
ul.leaders .price {
    float: right;
    padding-left: 0.2em;
}
</style>                  
<body>
    <div>
        <h2>Dot leaders</h2>
        
        <p>Typographers call “dot leaders” the rows of dots that connect
            columns in a table, such as this:</p>
        
        <div class="example">
            <ul class="leaders">
                <li><span class="description">Salmon Ravioli</span> <span class="price">7.95</span></li>
                
                <li><span class="description">Fried Calamari</span> <span class="price">8.95</span></li>
                
                <li><span class="description">Almond Prawn Cocktail</span> <span class="price">7.95</span></li>
                
                <li><span class="description">Bruschetta</span> <span class="price">5.25</span></li>
                
                <li><span class="description">Margherita Pizza</span> <span class="price">10.95</span></li>
            </ul>
        </div>
    </div>
</body>

</html>
Unfortunately, this implementation relies on what I consider a hack: the left and right elements overwrite part of the dotted border on the <li> with their white background, which is problematic for printing.

Has anyone seen a better approach?

Thanks in advance,

Eric