CSS button resize

[Chris]

.s {
   background-image: url(../images/button.png);
   width: auto;
   height: 21px;
   color: black;
   font-weight: bold;
   border: 1px solid black;
}

I want to make a button (image) that is auto resized to match the text. Preferably usable for both A and SUBMIT elements.

All I could do was to make it REPEAT, which looks ugly if you include all borders on the image. How to make it STRETCH/RESIZE?

[Chris]

As usual our beloved forum users were eager to answer this on IRC but were too lazy to reply on the forum
So, what they basicly said was:
It is impossible to do without use of CSS3. The nearest thing is sliding doors (but you can not make it purely on CSS side, needs HTML changes). It should work with IE6 (parts of the code might need to be different).

A
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

SUBMIT
http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/


Other links that emerged during discussion: http://sixrevisions.com/css/font-face-guide/ http://www.fontsquirrel.com/fontface/generator