CSS list-style-image vertical alignment issue

Get Started
1

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:


<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:


.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

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.



.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:

.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;
}
3

Ahh… that would work.

Thanks for your help Kohoutek.

4

Thanks for that kohoutek. On a side note, yourhostnow, you’ll probably want to move your links inside of the li tag instead. :slight_smile: