#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    Ul li dot leaders breaks in Firefox...


    I hope someone can help.

    There is a GREAT sample/tutorial on creating list leaders here ...
    www.w3.org/Style/Examples/007/leaders.en.html

    Which I used to create the ones on my site ...
    darnellwalcott.com/properties/despard/
    Works fine on Chrome, Safari and Opera, but it breaks on Firefox.

    Is there something I'm missing that makes it break?

    Note: The original code DOES work on firefox, so I'm thinking there's something in my CSS that causing it to break.

    I'm installing the code via a custom PHP widget in Wordpress.

    Code:
    <?php echo '
    <ul>
    <a href="http://goo.gl/maps/m3hhs"><img src="http://darnellwalcott.com/wp-content/uploads/2012/09/smallDespardMap220.jpg" alt="" width="220" height="220" target="_blank" class="scale-with-grid"/></a>
    <p>&nbsp;</p>
    <h4 class="widget-title">Summary</h4>
    <li>2 Double Bedrooms</li>
    <li>2 Full Bathrooms</li>
    <li>Cathedral Reception</li>
    <li>Gourmet Kitchen</li>
    <li>Roof Terrace</li>
    <li>Cul-de-sac</li>
    <li>Skylights</li>
    <li>End of terrace</li>
    <p>&nbsp;</p>
    <h4 class="widget-title">Tenanted</h4>
    <li>340 per week</li>
    </ul>
    &nbsp;
    <div id="leaderClear">
    <ul class="leaders">
    <h4 class="widget-title">Transport Links</h4>
    <li><span><img src="http://darnellwalcott.com/wp-content/uploads/manual/undergroundLogo.png"> Archway</span> <span><em>0.3 miles</em></span></li>
    <li><span><img src="http://darnellwalcott.com/wp-content/uploads/manual/londonRailLogo.png"> Uppr. Holloway</span> <span><em>0.5 miles</em></span>
    <li><span><img src="http://darnellwalcott.com/wp-content/uploads/manual/undergroundLogo.png"> Highgate</span> <span><em>0.9 miles</em></span>
    <li><span><img src="http://darnellwalcott.com/wp-content/uploads/manual/undergroundLogo.png"> Tufnell Park</span> <span><em>0.9 miles</em></span>
    <li><span><img src="http://darnellwalcott.com/wp-content/uploads/manual/londonRailLogo.png"> Crouch Hill</span> <span><em>1.3 miles</em></span>
    </ul>
    </div>
    &nbsp;
    <ul>
    <h4 class="widget-title">Contact</h4>
    <li>GREENACRE PROPERTY</li>
    <li><em>Julian Smith</em></li>
    <li><strong>020 7735 0760</strong></li>
    <p>&nbsp;</p>
    <li><a href="mailto:letti%6E%67s@greenacrepro%70ert%79.%63om">Notify me when available</a></li>
    </ul>'
    ?>
    and here is the CSS...

    Code:
    ul.leaders {
        max-width: 40em;
        padding: 0;
        overflow-x: hidden;
        list-style: none
        }
        
    ul.leaders li:after {
        float: left;
        width: 0;
        white-space: nowrap;
        content:
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     ". . . . . . . . . . . . . . . . . . . . "
     }
     
    ul.leaders span:first-child {
        padding-right: 0.33em;
        background: white
        }
        
    ul.leaders span + span {
        float: right;
        padding-left: 0.33em;
        background: white;
        position: relative;
        z-index: 1
        }
    Any help would be greatly appreciated.
    Last edited by designslave; March 23rd, 2013 at 05:59 PM. Reason: links seem to be broken...
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    50
    Rep Power
    35
    Adding "display: block;" to the 'em' element on line 32 of style.css worked for me

    Code:
    em {
      font-family: 'Volkhov', serif !important;
      font-size: 13px;
      display: block;
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    Thank you


    Yup that's gottit.

    Thanks a bunch!

IMN logo majestic logo threadwatch logo seochat tools logo