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