Mozilla browsers not liking image background color

[VodkaFish]

I'm trying to give my images some padding, a background color and a border. They're all links, so a:hover switches the background color to give it a nice mouseover/highlight effect. However, in FireFox and other Mozilla-based browsers, the background/border is going around the image. It's basically acting as though no image is there height-wise (but correct width-wise).

Here's the css:

#somepics {
	vertical-align: top;
	padding: 5px 10px 5px 0px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	line-height: 14px;
	font-weight: bold;
}
#somepics a{
	padding: 3px;
	background-color: #999999;
	border: 1px solid #333333;
	color: #535353;
}
#somepics a:hover{
	background-color: #666666;
}

Hoping someone can lend a brain, thanks.

[vgarcia]

Can we see an example of it in action? Also, try styling #somepics a img instead of #somepics a. That might help out .

[VodkaFish]

Tried #somepics a img, no difference unfortunately. * edit - correction - I was using the wrong class when editing, silly me. The outcome of using: #somepics a img is this - Things worked properly in FireFox, and didn't look buggy in IE, but a:hover img did not work in IE. Taking the img out from after a:hover did not make it work in either browser.

I'll try and get a sample up in a bit, connection here at work today seems to be like we're sharing a dial-up :|