Adding a dotted line spacer/infill with CSS

Question

I am working on a restaurant website. The design calls for the typical dotted line infill between a menu item and the price. I have been scouring the net and messing with it for an hour or so now and can't seem to find any good ways to do this with only CSS. I found a couple of other solutions on here that work great if you have a solid color background, however on this site it uses a background image and those solutions wouldn't work.

Example: Menu style "...." - fill in with periods has a good solution, but it sets the background colors to white of the menu item and price to hide the dotted lines behind them, but the page I am building has a background image so any solid color backgrounds would look bad.

I have tried using all kinds of combinations of table-row/table-cell or any other type of CSS display attributes and width settings on the elements, but no dice.

Here is some fake sample markup:

<ul> 
    <li><span>Soup</span><span class="dots">&nbsp;</span><span>$2.99</span></li>
    <li><span>Ice cream</span><span class="dots">&nbsp;</span><span>$5.99</span></li>
    <li><span>Steak</span><span class="dots">&nbsp;</span><span>$20.99</span></li>
</ul>

I have been trying to get this to work by using the "dots" class element with a bottom border to fill in the gap, but nothing I try works. I also just put a bottom border on the LI element all the way across the bottom of each row, but that is not what the designer wants. I can only think of doing it in javascript as a last resort, but wanted to see if you guys had any ideas. Or, I can just use tables, but really wanted to avoid that as well.

Thanks!

Answer 1

I can be achieved by using definition lists (fiddle):

HTML:

<div id="wrap">
    <div class="inner">
        <dl>
            <dt>$2.89</dt>
            <dd><em>Lorem ipsum dolor sit amet </em></dd>
        </dl>
        <dl>
            <dt>$21.89</dt>
            <dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd>
        </dl>
        <dl>
            <dt>$8.99</dt>
            <dd><em>Donec sed felis sit amet risus</em></dd>
        </dl>
        <dl>
            <dt>$11.50</dt>
            <dd><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Etiam ante ligula,</em></dd>
        </dl>
        <dl>
            <dt>$5.99</dt>
            <dd><em>Fusce condimentum</em></dd>
        </dl>
        <dl>
            <dt>$7.55</dt>
            <dd><em>Morbi nibh velit, sodales eu</em></dd>
        </dl>
        <dl>
            <dt>$6.50</dt>
            <dd><em>Etiam ante ligula,</em></dd>
        </dl>
        <dl>
            <dt>$11.50</dt>
            <dd><em>Fusce condimentum</em></dd>
        </dl>
        <dl>
            <dt>$2.50</dt>
            <dd><em>Morbi nibh velit, sodales eu</em></dd>
        </dl>
        <dl>
            <dt>$21.50</dt>
            <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
        </dl>
    </div>
</div>

CSS:

* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
    width:500px;
    border:1px solid #eff2df;
    margin:20px 20px;
    background:#809900;
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
    padding:20px 40px;
    border:1px solid #4c7300;
    position:relative;
    left:-2px;
    top:-2px;
    background:#eff2df;
    color:#4c7300;
    width:418px;
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
    position:relative;
    width:100%;
    border-bottom:1px solid #eff2df;
}
#wrap dd{
    line-height:1.2em;
    position:relative;
    padding:0 5em 0 0;
    text-align:left;
    border-bottom:1px dotted #000;
    clear:both;
    margin:0 0 .4em 0;
    min-height:0;
}
* html #wrap dd{
    border:none;
    background: url(images/dotted-leader.gif) repeat-x left bottom;
    height:1%;
}
#wrap dt{
    background:#eff2df;
    padding:1px 0 1px 5px;
    color:#809900;
    position:absolute;
    bottom:0px;
    right:-1px;
    z-index:99;
}
#wrap dd em{
    margin:0 ;
    position:relative;
    top:.25em;
    padding:0 5px 0 0;
    background:#eff2df;
}

Reference Link

Answer 2

I would go with something like this:

Example Fiddle

It uses the dotted border on the .dots element and shifts it some pixels to the top.

ul li {
    display:table-row;
    width:15em;
}
ul li span{
  display:table-cell;   
}
.dots{
    min-width:10em;
    position:relative;
    bottom:4px;
 border-bottom:1px dotted #777;   
}

Nice sideeffect - you dont need to float the elements. However this solution uses display:table-cell so this won't work in old IEs (<IE8).
Depending on the background, you could use the li-border solution and replace the solid colors on the span-elements with the background-image itself.