Without seeing the CSS it's hard to say, but really I would set the images to display:block so they behave properly without any oddball bottom margin or line-height behaviors, set the LI to display:inline and forget trying to set anything on them, and if you really need a second element for style, apply it to the anchor...
<li class="add"><a href="/submit">Add<span></span></a></li>
set the li to display:inline so their behaviors are a non-issue, set the anchor to display:block and position:relative (probably with a haslayout trigger to fix positioning) and then absolute position the span over the text. That way you have GOOD "images off" graceful degredation. You can then slide the background around for the hover states, or store multiple buttons and slide to the appropriate set, then use overflow on the anchor and move the span for hover states.
See this demo I wrote a while ago for another user:
which does all those buttons (and is capable of even more) using just one image file: