HTML/CSS: IE8 background overflowing border - html

Question

In IE8 one of my buttons background's is overflowing it's border. Here is an image that highlights the problem:
A live example can be seen here: http://rcnhca.org.uk/sites/first_steps/
The markup for the button is:
<a class="button alpha bold" href="#">
<img alt="rcn icon" src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png">
</a>
And the css (I use filters to draw a gradient instead of an image):
a.button.alpha, a.button.alpha:focus {
margin-left: 0px;
}
a.button.omega, a.button.omega:focus {
margin-right: 0px;
}
a.button{
display: block;
position: relative;
float: left;
margin: 10px 5px;
right: 0px;
height: 2.438em;
line-height: 2.438em;
padding: 0 0.938em;
border: #3a90a7 2px solid;
font-size: 0.938em;
text-decoration: none;
color: #202d32;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.oldie a.button{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
a.button:hover {
border: #202d32 solid 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}
a.button:active{
padding-top: 0.125em;
padding-left: 1.063em;
padding-right: 0.813em;
height: 2.313em;
background: #e5e5e5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: #cccccc;
background: -moz-linear-gradient(top, #cccccc 0%, #cccccc 3%, #e5e5e5 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(3%,#cccccc), color-stop(5%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -o-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -ms-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
-moz-box-shadow: 0 1px 2px #AAAAAA inset;
box-shadow: 0 1px 2px #AAAAAA inset;
}
.oldie a.button:active {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
a.button img {
position: relative;
margin-right: 15px;
vertical-align: middle;
}
Does anyone know what's going on? Thanks.

Answer 1

I can't explain why, but when you remove the horizontal margins on the anchor it fixes the problem (both left and right)
My best guess is that the IE filter is doing something unpredictable.
If you wrap the element then apply a margin to that instead, it should solve it.

Answer 2

there is no way to do this for IE8 because its not support css3 BTW its work in IE9.
for more details about IE & CSS compatibility check this
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx