help styling the asp:button control using the Sliding Door technique

Question

Hello, due to a problem we are encountering with asp.net (see: asp.net 4.0 Random posting behavior) we need to style asp:button controls (that of course resolve to <input type=submit> tags) using the sliding door technique.

We originally had <button><span>text</span></button> sets but because of the above issue we need to move to asp:Button controls.

You cannot put a <span> tag inside of an asp:button control, so working it like the above will not work.

I got it to work only in IE8 by wrapping the button with a div using "display: inline-block". But it fails in IE7, so this is not a solution for us. It needs to work in both IE7 & IE8 (Firefox would be great, but in not required)

Answer 1

To fix display: inline-block; for IE6-7 you can try

<div class="button"><input type="submit" /></div>


.button {
   display: inline;
   display: inline-block;
   zoom: 1;
}

(These styles are correct almost for any time you want simulate inline-block in all browsers)