This is a problem I struggled with for a while. I like using non-traditional bullets, but if they're 1px too large, they won't line up correctly with the list item. So here's my solution: background image on the list item, I really find it hard to believe that it didn't occur to me earlier while I was fighting margin and padding to align the stupid bullet with the text. Anyways, just in case, anyone else had this problem I thought I'd post what I found. I just used some dummy text in the lists.

Unstyled 

• Do not put anything but LI list items inside an UL. 
• The COMPACT attribute is not widely implemented. 
• Not all browsers support the TYPE attribute

Styled with " list-style: disc url(img); " [this is the problem] 

• Do not put anything but LI list items inside an UL.
• The COMPACT attribute is not widely implemented. 
• Not all browsers support the TYPE attribute

.disc li{
    list-style: disc url('bullet_arrow_large.gif');
    padding-top: 3px;
    padding-bottom: 3px;
}

Styled with " background: url(img) no-repeat left center; " [this is the solution] 

• Do not put anything but LI list items inside an UL. 
• The COMPACT attribute is not widely implemented. 
• Not all browsers support the TYPE attribute

.bg-img li{
    list-style: none;
    line-height: 34px; 
    background: transparent url('bullet_arrow_large.gif') no-repeat left center; 
    padding: 0px 0px 0px 25px;
} 


---

Looks 100% better doesn't it? AND it's perfectly accessible since it's still a <ul>. You'll probably have to tweak the padding and margin according to the left-right position you want, but this should give you a good starting place.

cheers,
_tim