Internet Explorer CSS button display problem

2007.08.28 @12:26

		Problem of the day :
under IE if you want to have buttons without too much space on left and right ( which cannot be removed by neither margin:0 nor padding: 0 ), you can use this trick : { overflow: visible; } which works on all version of IE.
But you may just trigger another bug in IE7 : when you scroll the page the buttons display start to be corrupted ( they disappear / vanish pieces by pieces) and fixed only if you move the mouse pointer above them ! Cool...
This is because you used the directive { height: ...; } which seems to make IE try to "stretch" the box and therefore triggers these problems.
To fix this you just have to use { line-height: ...; } instead of height and this will work better in FF as well.
Example of a nice button : (without the complete rules as on the trick above)

.button {
   background: url(images/button.gif) no-repeat center right;
   padding: 0px 22px 0px 3px;
   width: auto;
   margin: 0;
   border: solid 1px #440000;
   font: bold 11px Verdana, sans-serif;
   color: white;
   /* height: 21px; # triggers bug in IE7 with overflow */
   line-height: 16px;
   overflow: visible;
}

PS: yes I really need to implement some styles for the code !
[EDIT] : done!