SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS list-style-image vertical alignment issue

    Hey everyone,

    I have a <ul> <li> list of multiple links with a custom image bullet. In Chrome, IE, and FireFox the bullet greatly differs in vertical positioning.

    Here's a screenshot in Chrome. You can see how the positioning is off...


    HTML Code:
    HTML Code:
    <ul class="list_links">       	
                <a href=""><li>Ultimate Frisbee</li></a>
                <a href=""><li>Northeastern Colleges</li></a>
                <a href=""><li>Division 1:  Swimming & Diving</li></a>
                <a href=""><li>National Honor Society</li></a>
                <a href=""><li>AP Computer Science</li></a>
                <a href=""><li>Business & Marketing Majors</li></a>
                <a href=""><li>No Car Policy?  Not for me..</li></a>
    </ul>
    CSS Code:
    Code:
    .list_links li {
    	list-style: url(bullet.png);
    	margin: 3px 0 3px 0;
    }

    Is there any way to fix the vertical positioning without adding clear padding to the bullet?

    Thanks,
    Brandon

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The list-style property is a bit problematic in IE (minus IE8). Instead make it a background image, disable the default list style, add a padding to accomodate for the image width, and the space between your bullet image and the text, then adjust your image with positioning the background to your liking.

    Code CSS:
     
    .list_links ul {
        list-style:none;
    }
     
    .list_links li {
         background:url(bullet.png) no-repeat left center; 
         padding-left: (n)px; /* the width of your image + some space */
         margin: 3px 0;
    }

    Or, for even more control:

    Code CSS:
    .list_links li {
         background:url(bullet.png) no-repeat 0 (n)px; 
         padding-left: (n)px; /* the width of your image + some space */
         margin: 3px 0;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Addict yourhostnow's Avatar
    Join Date
    Apr 2005
    Location
    New York
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh... that would work.

    Thanks for your help Kohoutek.

  4. #4
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that kohoutek. On a side note, yourhostnow, you'll probably want to move your links inside of the li tag instead.


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
  •