fixing the top margin on a bullet

Hi all,

I have what should be a very simple question: I'm trying to drop down the green bullet seen on the link below by 1px so that it vertically aligns with the middle of the text (cross-browser, or course).

http://www.cbd.int/business/tools-and-mechanisms/guides-and-best-practices/national-biotrade-project-in-bolivia.aspx

i pasted the code below (not my CSS). I've spent 30 mins trying to do this and i'm at my wits end. Someone told me that using negative margins was a bad idea, but that's where i'm headed unless someone can spot the error.

#middle ul li {
background:url(../App_Themes/CBD/Images/green_bullet_shadow.png) 0px 4px no-repeat;
padding-left: 20px;
margin-left: 20px;
margin-bottom: 4px;
list-style-position:outside;
}

Thanks,



Jay

p.s: I know there's a problem with the grey BG not filling the box - but that's another issue entirely =(

You can control the position via pixels like this:

#middle ul li {
background: url("../App_Themes/CBD/Images/green_bullet_shadow.png") no-repeat scroll 0 5px transparent;
list-style-position: outside;
margin-bottom: 4px;
margin-left: 20px;
padding-left: 20px;
}

to move it down by 1px (I think having it set to 6px looks slightly better) or you can set the bakground image to be vertically centred like this:

#middle ul li {
background: url("../App_Themes/CBD/Images/green_bullet_shadow.png") no-repeat scroll 0 center transparent;
list-style-position: outside;
margin-bottom: 4px;
margin-left: 20px;
padding-left: 20px;
}

Thanks! The 6px was perfect! And I managed to fix the BG problem too =)