Simulating Dot Leaders in CSS2 and IE7

**ericflynn** · Feb 16, 2013 19:50

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

**ralph.m** · Feb 16, 2013 20:23

Hi ericflynn. Welcome to the forums.

As the page you took this example from indicates, CSS3 has a way of doing this, although you obviously want this to work in older browsers like IE7 (which personally I wouldn't bother with). Anyhow, you could follow the basic lead from this example:

http://dabblet.com/gist/4161142

and instead of using :after, just use an extra dd (although extra elements for presentation isn't nice, I admit):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">   
<style type='text/css'>
dl {
	overflow: hidden;
}
dt {
	float: left;
	padding: 0 .4em 0 0;
	margin: 0;
}
dd.price {
	float: right;
	padding: 0 0 0 .4em;
	margin: 0;
}
dd.line {
	overflow: hidden;
	height: 1em;
	border-bottom: 1px dotted;
}
</style>                  
<body>
<dl>
    <dt>Salmon Ravioli</dt>
    <dd class="price">7.95</dd>
    <dd class="line"></dd>
</dl>

</body>
</html>

I'm sure there are better ways, but that's my little effort, for what it's worth.

As I said, catering for IE7 is a waste of time these days (let 'em upgrade or get a better browser like Chrome).

**ericflynn** · Feb 17, 2013 16:03

Hi ericflynn. Welcome to the forums.

Thanks very much, this is a good place.

As I said, catering for IE7 is a waste of time these days (let 'em upgrade or get a better browser like Chrome).

Ahh, I would love to use CSS3 and/or a more modern browser. However, the production environment is an IETM viewer which embeds an instance of IE7, so I am constrained in my use of languages and technologies. Also, all pages are generated from XML source with XSLT, so adding display elements is not an issue.

However, your added <dd> trick looks great, I am trying it out now, thanks for the suggestion.

**ronpat** · Feb 18, 2013 02:21

Originally Posted by ericflynn

all pages are generated from XML source with XSLT, so adding display elements is not an issue.

Are you saying that adding additional container tags is not a problem? or are you limited to minimal HTML?

Also, you mentioned that you wanted numbered lists, yet your example is of an unordered list without markers. Which is it? Numbered or not?

I created some code that works beautifully in FF, Chrome, IE8 and IE9, but it uses display:table properties so it won't work in IE7; plus it uses a garden full of additional container tags. The output is great, the HTML is "busy", the css is not IE7 compatible.

If you're interested, I'll consider posting it at the risk being laughed out of the galaxy

This is a fun challenge that's harder than it sounds without using css3 and pseudoclasses.

**Paul O'B** · Feb 18, 2013 08:09

Hi,

I did an example of this about 6 years ago which came from this article I wrote. There were versions for tables, dls and lists but the absolute list example is the easiest and shortest code.

It should scale well and print well in all but ie6.

**ericflynn** · Feb 21, 2013 22:07

Originally Posted by ronpat

Are you saying that adding additional container tags is not a problem? or are you limited to minimal HTML?

I am currently generating to the 4.01 Transitional DTD. There are many instances where I generate <div>, <span> and <table> containers for layout purposes. As I mentioned in another post, IE7 is part of the production environment, so I have to play within its limitations.

Also, you mentioned that you wanted numbered lists, yet your example is of an unordered list without markers. Which is it? Numbered or not?

Numbered, and the rows also contain UI controls, but those are solved problems. I wanted to simplify the question to the essentials, so I left out most of the page layout.

I got this working using Ralph M's suggestion, but I am going to play with Paul'OB's example, I am always trying to improve our application.

**ronpat** · Feb 21, 2013 22:20

Thanks for the reply. I read Paul's example and realized that my effort was rather pathetic

It would not support line wrapping.

Glad to hear that Ralph's code is working for you.

Cheers

User Tag List

Thread: Simulating Dot Leaders in CSS2 and IE7

Thread Tools

Display

Simulating Dot Leaders in CSS2 and IE7

Bookmarks

Bookmarks

Posting Permissions