4

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 enter image description here

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 enter image description here

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;
 }

enter image description here

But switching that back to IE6 mode makes it even more uglier

enter image description here

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. button_red_left enter image description here

Nimantha
  • 6,405
  • 6
  • 28
  • 69
KriZ
  • 682
  • 1
  • 7
  • 17
  • 1
    `"IE8's compatibility mode (IE6)"` - that's not right. IE8's compatibility mode emulates IE7 *not* IE6. Can you clarify that it really is IE7 you're trying to fix, and not IE6? – thirtydot Jun 03 '11 at 09:23
  • i've got a VM with plain old IE6 on, the screen output there is the same (= empty spaces when using a button). We never rolled out IE7 in our enterprise. – KriZ Jun 03 '11 at 14:08
  • The output here might be the same in IE6 and IE7, but you can see how I was confused when you were saying "IE8 compatibility == IE6". I'll have a look at fixing it for all of IE8/7/6. – thirtydot Jun 03 '11 at 14:15

1 Answers1

1

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

DevAntoine
  • 1,932
  • 19
  • 24
  • Final css that works both in IE6 & IE8 :
    .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:8px; padding-top:0px; text-decoration:none; border-style:none; color:White; width:auto; overflow:visible ;} .button_red2 span { background:transparent url('../../images/button_red.gif') no-repeat top right; padding:3px 10px 2px 0px; border-style:none; display:block ; }     – KriZ Jun 07 '11 at 10:30