title: IE6 vs IE8, button vs hyperlink, CSS rendering issue
body: <p>Given the following sample  form code and CSS stylesheet</p>
  <p><strong>Form</strong></p>
  <pre><code>&lt;div class=&quot;Center_300 &quot;&gt;
   &lt;button id=&quot;KeaneDelegate&quot; runat=&quot;server&quot; class=&quot;button_red2&quot; causesvalidation=&quot;false&quot;&gt;&lt;span&gt;Keane's delegate view&lt;/span&gt;&lt;/button&gt; 
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;a class=&quot;button_red2&quot;&gt; &lt;span&gt;Keane's delegate view&lt;/span&gt;&lt;/a&gt; 
  &lt;/div&gt;
  </code></pre>
  <p><strong>css</strong></p>
  <pre><code>.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 } 
  </code></pre>
  <p>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
  <img src="https://i.stack.imgur.com/8ahX9.jpg" alt="enter image description here" /></p>
  <p>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
  <img src="https://i.stack.imgur.com/bPDMm.jpg" alt="enter image description here" /></p>
  <p>If i then remove the block alignment and adjust the padding , it renders perfectly (but no longer the hyperlink)</p>
  <pre><code>.button_red2  span
  {   background:transparent url('../../images/button_red.gif') no-repeat top right; 
      padding:3px 10px 3px 0px;
      border-style:none;
   }
  </code></pre>
  <p><img src="https://i.stack.imgur.com/Sufum.jpg" alt="enter image description here" /></p>
  <p>But switching that back to IE6 mode makes it even more uglier</p>
  <p><img src="https://i.stack.imgur.com/8UfTo.jpg" alt="enter image description here" /></p>
  <p>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.</p>
  <p>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?</p>
  <p>Below the 2 gifs for the sliding doors.
  <img src="https://i.stack.imgur.com/FxfAy.gif" alt="button_red_left" />
  <img src="https://i.stack.imgur.com/iVq5c.gif" alt="enter image description here" /></p>