Button Issue and Alignment in IE 7

[alexgv14]

Does anybody know an easy fix for this button issue in IE 7? if you look at it in IE 7 the buttons are not aligned correctly and the rollovers don't work.

http://ryanmcmaster.com/clients/summit/

[alexgv14]

Here is the CSS code for the button.

span.button a {
background:url("images/button.png") no-repeat scroll left top transparent;
float:left;
font:bold 16px/22px Arial,Helvetica,sans-serif;
margin:0;
padding:8px 0 10px 20px;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
width:auto;
display:inline;
color:#2d91db;
}

span.button a span.right {
padding:2px 45px 10px 0;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
background:url("images/button.png") no-repeat scroll right top transparent;
float:right;
height:29px;
margin:-8px -45px -9px 60px;
}

#main span.button a {
	background:url("images/button-content.png") no-repeat scroll left top transparent;
float:left;
font:bold 16px/22px Arial,Helvetica,sans-serif;
margin:0;
padding:8px 0 10px 20px;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
width:auto;
color:#ffffff;
}

#main span.button a:hover {
color:#ffffff !important;
}

#main span.button a span.right {
padding:2px 45px 10px 0;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
background:url("images/button-content.png") no-repeat scroll right top transparent;
float:right;
height:29px;
margin:-8px -45px -9px 60px;
}



#main span.button a:hover, span.button a:hover {background-position:left bottom; }
#main span.button a:hover span.right, span.button a:hover span.right {background-position:right -42px;}

Took the time to check it and it looks fine to me in Chrome and IE7.