Grr, arg! CSS Positioning...

[GravyMonster]

Hey all,

Quick Q, I've got the below code:

<div style="width: 235px;">
	<img src="images/btn-discuss-left.gif" style="float: left;" />
	<div style="background-image: url('images/btn-discuss-bg.gif'); background-repeat: repeat-x; float: left; width: 173px; height: 30px; display; inline;"><a href="#" style="margin-top: 7px; display: block; font: bold 10pt arial; color: #FFFFFF; text-decoration: none;">Discuss your project</a></div>
	<img src="images/btn-discuss-right.gif" style="" />
</div>

In FF it looks great:

In IE, it does not...

can anyone see why IE is adding the additional padding?

I swear I'm going to go postal over this one in a minute

TIA

 

[GravyMonster]

Thanks for the replies guys.

I know the code in the example was crap - it was just a quickly thrown together proof of concept, the updated version is below.

The reason it was three images was because that's how the site had been previously built and I couldnt be arsed to put 60+ button images together. However as it ended up that was the only effective solution. So now it looks like...

<div class="discuss-btn"><a href="#" alt="Discuss your project" title="Discuss your project">Discuss your project</a></div>

.discuss-btn {
	background-image: url('../images/btn-discuss-bg.gif'); 
	float: left; 
	clear: both; 
	background-repeat: repeat-x; 
	width: 235px; 
	height: 30px; 
	margin-bottom: 6px;
}

.discuss-btn A {
	margin: 7px 0px 0px 34px; 
	display: block; 
	font: bold 10pt arial; 
	color: #FFFFFF;
	text-decoration: none;
}