The following sample form code and CSS stylesheet
The form
<div class="Center_300 "> <button id="KeaneDelegate" runat="server" class="button_red2" causesvalidation="false"><span>Keane delegate view</span></button> <br /> <br /> <a class="button_red2"> <span>Keane 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 viewed in IE8 compatibility mode (IE6), the button renders correctly, but I get spaces to the left and right of the text. the hyperlink is displayed correctly 
When I return to the initial mode of IE8, the button will display correctly, as well as the hyperlink, but there is a slight inconsistency in the sliding door, the right part seems to be shunted 1 pixel down 
If you then remove the alignment of the block and adjust the indentation, it will perfectly display (but not a 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 back to IE6 mode makes it even uglier
I am trying to use a button and not a hyperlink for my forms, but from the CSS style I got, only the hyperlink perfectly displays different versions of IE.
Why is this extra space in rendering IE6 on a button? Why does it look like a pixel outside the line when it returns to IE8 mode and how can I sort it? Or is it not solvable?
Below 2 gifs for sliding doors. 
tnxs
The crisis