Display differs in IE8, IE8 Compatability Mode & Firefox

Good evening,

Was wondering if someone could take a look at the following page for a troublesome compatibility error between IE and Firefox. Page exists in a Wordpress environment, but I'm pretty sure this is a straight CSS question.

The page in question is http://afscme2960.org/officers

My CSS concerns are surrounding a series of rules that create the image thumbnail pictures (for the president, treasurer, secretary etc.)

The image looks fine in Firefox - my default browser. Also looks fine if I throw IE into compatibility mode. (Not exactly sure what this is.) In IE8, however, the background image gal-bottom.gif repeats across the top and bottom of the DIV. I can change the location of where it overlaps by altering the padding setting of the rule that calls the image.

Was wondering how to eliminate the overlap to begin with... or if there is a better way to create the same effect?

Thanks,
Steve Ryan

CSS Code in question:

div.officer
{
	width:130px;
	min-width: 130px;
	float:left;
	margin: 0px 10px 10px 0px; 
	background: url(images/gal-top.gif) no-repeat 0 0;
}
 
div.officer img 
{
	margin: 12px 0 10px 12px;
	border: 1px solid #000;
	background: none;
}
 
div.officer p
{
	font-size: 8pt;
	font-family: arial;
	margin: 0px;	
	padding: 0px 5px 20px 12px;
	background: url(images/gal-bottom.gif);
	background-position: 0 100%;
	background-repeat: no-repeat;
}
 
div.officer_clear
{
	clear:left;
	padding: 10px 0 0;
}