Given the following sample form code and CSS stylesheet
Form
<div class="Center_300 ">
<button id="KeaneDelegate" runat="server" class="button_red2" causesvalidation="false"><span>Keane's delegate view</span></button>
<br />
<br />
<a class="button_red2"> <span>Keane's delegate view</span></a>
</div>
css
.button_red2
{
background:url('../../images/button_red_left.gif') no-repeat left top;
display:inline;
float:left;
font-size:12px;
font-weight:bold;
line-height:16px;
height:21px;
padding-left:9px;
text-decoration:none;
border-style:none;
color:White;
}
.button_red2 span
{ background:transparent url('../../images/button_red.gif') no-repeat top right;
padding:3px 10px 2px 0px;
border-style:none;
display:block;
}
.Center_300 { width:300px; margin:0 auto }
When viewing this in IE8’s compatibility mode (IE6), the button is rendering correctly but i get ‘blank’ spaces to the left and right of my text.
the hyperlink renders correctly
When i switch back to native IE8 mode, the button renders correctly, as lenghty as the a hyperlink but there’s a slight misalignment in the sliding door, the right part seems to be shunted 1 pixel down
If i then remove the block alignment and adjust the padding , it renders perfectly (but no longer the hyperlink)
.button_red2 span
{ background:transparent url('../../images/button_red.gif') no-repeat top right;
padding:3px 10px 3px 0px;
border-style:none;
}
But switching that back to IE6 mode makes it even more uglier
I’m trying to use a button, not a hyperlink for my forms but from the CSS style I got delivered, only the hyperlink renders perfectly between various IE versions.
Why is there that extra space in the IE6 rendering on the button? Why does it appear a pixel out of line when back to IE8 mode and how can that be sorted? Or is it not solvable?
Below the 2 gifs for the sliding doors.
I think it is caused by the button bug in IE which is rendered too wide.
Have a look at this article: http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie