title: dotted line span between word and image html problem
body: <p>Below i have hardcoded dotted lines on my menu between the name and image, I cant figure out how to get dotted lines that adjust to the width between where i have them now.</p>
  
  <p>This is the code below that i have. I basically want to remove the hardcoded ..... and make it better somehow with a repeated image inside or just something easier, how can i approach this? I have been boggled with this problem for some time now...</p>
  
    
  
  <pre><code>  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
  
    $('.serviceDesc').hide();
    $('.serviceName:first').addClass('active').next().show(); 
  
    $('.serviceName').click(function(){
    if( $(this).next().is(':hidden') ) { 
    $('.serviceName').removeClass('active').next().slideUp(); 
    $(this).toggleClass('active').next().slideDown(); 
    }
    return false; 
    });
  
    });
    &lt;/script&gt;
    &lt;style&gt;
    #servicesContainer {
        width: 485px;
        height: 400px;
        margin: 0 auto;
        margin-top: 20px;
    }
    h2.serviceName {
        margin: 0;
        margin-bottom: 5px;
        margin-top: 5px;
        background-image: url(http://i.imgur.com/IcnZl.png);
        background-position: right top;
        background-repeat:no-repeat;
        height: 29px;
        line-height: 24px;
        width: 480px;
        font-size: 18px;
        font-weight: bold;
        float: left;
        color:#000;
    }
    h2.serviceName a {
        color: #000;
        text-decoration: none;
        display: block;
    }
    h2.active {
        background-position: right bottom;
    }
    .serviceDesc {
        margin: 0 0 10px;
        padding: 0;
        overflow: hidden;
        width: 480px;
        clear: both;
    }
    .serviceDesc .block {
    }
    .serviceDesc .block p {
        color: #413f44;
        margin: 0;
        font-size:18px;
    }
    &lt;/style&gt;
  
    &lt;div id="servicesContainer"&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.&lt;br /&gt;
            &lt;br /&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;br /&gt;
        &lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2 class="serviceName"&gt;&lt;a href="#"&gt;Text...............................................................................&lt;/a&gt;&lt;/h2&gt;
      &lt;div class="serviceDesc"&gt;
        &lt;div class="block"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>You can view an example here:
  <a href="http://jsfiddle.net/K7MHK/" rel="nofollow">http://jsfiddle.net/K7MHK/</a></p>