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…
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.
which does all those buttons (and is capable of even more) using just one image file:
Thanks for your reply deathshadow. I just used the rollover feature Dreamweaver has, I’m surprised they still include it in Dreamweaver if it causes that many problems. And I’m not even using an old version of Dreamweaver; I have CS5. Anyways, I’ve never used CSS sprites for image rollovers so I’m a bit confused. I got the rollover to work but a little bit of the other image displays next to it:
Personally, I just try to avoid having to edit/recreate images as much as possible.
I’d have to see the whole image/button set/menu to weigh in more, but I suspect you’re overthinking things – especially with all the classes for nothing on stuff deeper inside the items. I mean, if it’s in a LI then you have a list… so why does it need a ‘rollover’ class… and if you need a title attribute on what appears to be a menu, there’s something horribly wrong with the content of those anchors. (or in the case of the example HTML you showed, the total lack of actual content).
Which is why I do agree it’s probably better to put the text in there normally over the image… at the very least you should have the text there and the image over it, so images off users (like people on metered data plans) aren’t left out in the cold.
Though from your small picture I would probably just use a simple repeating background under the text, and then do the border and lightly rounded corners with CSS3… IE8 and lower users wouldn’t get the fancy corners; OH WELL.
If you post an image of the complete menu in all it’s ‘states’ (basically make 3 rows) we could better dial in the best solution for you.