List-style-image location

I am trying to get my red squares to line up with the top of my text but I can't seem to work it out?

http://dev-decker.virtualhorizons.com/quality.htm

What am I doing wrong?

//style sheet code
.qc_bullets ul {	
	position: relative;
	left: -25px;		
	list-style-image: url('../images/red_square.jpg');
	list-style-type: square;	
}

.qc_bullets ul li {	
	margin: 0px 0px 0px 0px; /*top-right-bottom-left*/
	padding: 0px 0px 0px 0px; /*top-right-bottom-left*/
}

//html code
<div class="qc_bullets">
					<ul>
						<li><a href="#">ISO/TS 16949 (PDF)</a></li>
						<li><a href="#">ISO 14001 (PDF)</a></li>
						<li><a href="#">Scope of Accreditation (PDF)</a></li>
					</ul>
				</div>

Code (markup):

 

As you have given the URL i see it right... ? what the problem...? post a screenshot and explain..?

 

When you go to the URL, the little red squares next to the text in the middle of page aren't lined up with the top of the text they are bulleted for. See I took screen capture and drew a line where the tops of the squares should be.

 

Navarone,

I've encountered that several times, and there are two solutions that I've used.

If it's important for semantic reasons to specify the images as a list-style-image, then try adding or removing rows of transparent pixels to the top or bottom of the image to adjust it's position. You may need to have different images for IE and non-IE browsers.

If tight visual control is most important, then ditch the list style image, and specify the image as a background-image of the li. (You may need to add a small amount of transparent pixels to the image using this technique as well.)

I just haven't found any better techniques for position the list image.

 

set an image as a background than you will be able easy to move it anywhere you want

 

try this. should work?

list-style-image: url('../images/red_square.jpg') no-repeat left center;

Code (markup):