Forum Moderators: not2easy
HTML
<div class="button"><div><div>
<input type="button" value="download"/>
</div></div></div>
CSS
div.button {float:left;margin:0px 1px 1px 0px;background-image:url(../images/button_topLeft.gif);}
div.button, div.button * {background-repeat:no-repeat;background-color:transparent;}
div.button div{position:relative;bottom:-1px;
background-image:url(../images/button_bottomLeft.gif);background-position:bottom left;}
div.button div div{position:relative;top:-1px;right:-1px;
background-image:url(../images/button_topRight.gif);
background-position:top right;}
div.button input{padding: 2px 5px 2px 5px;
background-image:url(../images/button_bottomRight.gif);background-position:bottom right;}
but in IE they, of course, still have the bloated default height/width. I can't * hack width/height to 1%, even, because the text is in value, not contained within the tag, so IE won't stretch to fit. Is there anyway to shrink down the size of a button in IE, without hardcoding a fixed width/height (since my buttons are populated dynamically)?
Edit: without just converting to <a>s, which is what I will do if all else fails.