Forum Moderators: not2easy

Message Too Old, No Replies

IE handling of input box width and height

Trying to style my buttons

         

qeantk

2:18 pm on Mar 22, 2004 (gmt 0)

10+ Year Member



So I am using a variation of ALA's rounded corners to style the input buttons on a page:

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.

qeantk

2:28 pm on Mar 22, 2004 (gmt 0)

10+ Year Member



Ah... nm, found it. Explicitely setting overflow:visible, takes care of it:

* html div.button input{overflow:visible;height:1px;width:1px;}

Edit: Damnit, works in IE5, but not 6 (quirks mode even).