SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simulating Dot Leaders in CSS2 and IE7

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,458
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ericflynn View Post
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,458
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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

  8. #8
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    I do like the Document List solution!
    Cheers
    Nik A.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •