Top margin/padding showing up out of nowhere (just IE8)

Hi all,

Does anyone here know why in IE8 there is an additional top margin/padding appearing causing the H2 title to appear lower than the below CSS suggests (about 10px or so)?

It’s just IE8, in IE7 and all other major browsers the below works 100% fine.

h2.title {
	/* Sliding right image */
	background: transparent url("../images/page_title_right.png") no-repeat scroll top right; 
	display: block;
	float: left;
	height: 45px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding-right: 15px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	margin: 10px 0px -1px 0px;	

	/* FONT PROPERTIES */
	font-size: 24px;
	text-transform: capitalize;
	color: #C00000; 
	font-weight: bold;	
}

h2.title span {
	/* Background left image */ 
	background: transparent url("../images/page_title_left.png") no-repeat; 
	display: block;
	line-height: 45px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding: 0px 0px 0px 57px;		
} 

Thanks in advance,

I tried what I could think of and came up with this below. It’s not pixel perfect, most browsers are identical but IE7, IE8 and Opera seem to want to throw in a 2px padding difference in there for whatever reason.

h2.title {
	/* Sliding right image */
	background: transparent url("../images/page_title_right.png") no-repeat scroll top right; 
	display: block;
	float: left;
	height: 45px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding-right: 15px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	margin: 10px 0px 0px 0px;	

	/* FONT PROPERTIES */
	font-size: 24px;
	text-transform: capitalize;
	color: #C00000; 
	font-weight: bold;	
}

h2.title span {
	/* Background left image */ 
	background: transparent url("../images/page_title_left.png") no-repeat; 
	display: block;
	line-height: 26px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding: 7px 0px 12px 57px;			
} 

* html h2.title span {padding: 9px 0px 10px 57px;} /* IE6*/
* + html h2.title span {padding: 9px 0px 10px 57px;}  /* IE7*/