Scalable round CSS buttons

[Neme]

Hi all!

I'm relatively new to CSS and not sure if it's the difference in the browsers
or my inexperience but what i'm trying to do is to make some buttons which
have rounded edges and are scalable and can be placed anywhere in text.

Here is what I've done so far which works great in firefox but not in IE6.
http://bangalore.ooblez.com/index.html

I place the image under the text using absolute positioning and z-indexing
but either IE6 doesn't get the scaling right or i forgot something. Below is
the css for the button image. As far as i know the image should scale
relative to it's containing box (the "<a href.."). If i change the width and
height to some fixed pixel value IE6 scales the pic accordingly but the use
of fix values are what i'm trying to avoid at this point.

.cssButton img {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

Any suggestion? I'm open to other ideas about scalable buttons. I could
do it using plain colored background but rounded images are more fun.
Try increasing the fontsize in FF (Ctrl++) and see how the buttons scale.

[Veronica]

Non-vector images like gifs can look funky when you let the browser re-size them.
Have you thought about using css to fill the background of the spans, using css to round the corners?

[Dragos]

check this out: http://www.webfixtech.com/repository/cssbutton/
posted here: http://www.dynamicdrive.com/forums/s...ferrerid=21430