Rounded input buttons, absolute positioning, liquid width

Question

I realize there are lots of rounded buttons questions, but my needs are fairly specific, and this hasn't been answered elsewhere.

Here's my requirements:

• Works with absolutely positioned buttons
• Client side only techniques ( can't change HTML on server side )
• Works on input type=button and input type=submit (button element not needed)
• Fixed height, liquid width
• Supports IE7 or better

The absolute positioning + client side only makes most rounded corner techniques unusable in my opinion.

Images or no images does not matter (either way is fine). JavaScript is allowed.

EDIT: Changed question to reflect actual problem: the one HTML element I thought I needed wasn't really the requirement.

Answer 1

It's not possible for IE. That's why you can't find it anywhere else. The only thing you could do is use a static background image, but that will stretch for different widths.

Answer 2

Since javascript is allowed (based on one of your comments), I don't see how it would be a big performance hit to:

1. wrap the input elements with div
2. take the positioning properties of the input and copy them to the div wrapper
3. remove the positioning off the input using an inline position: static
4. add other elements or styles to get your rounded corners. Being fixed height, then for everything other than IE7, some css like this should work (assumes fixed height of 20px, rounded end images that are 10px wide by 20px high):

Css:

div.inputWrap:before, 
div.inputWrap:after {content: ' '; display: inline-block; height: 20px; width: 10px; background: url(/yourRoundedLeftEndImg.png) top left no-repeat;}

div.inputWrap:after {background: url(yourRoundedRightEndImg.png);}

Assuming your javascript gives you this html:

<div class="inputWrap"><input /></div>

You will need to style the input to get rid of borders, and such (I also found that my test in Firefox required me to set vertical-align: top, but not sure if that is necessary. For IE6-7, you would actually have to add extra div's before and after the input since they do not recognize the :before and :after pseudo-classes.

Answer 3

I ended up using multiple backgrounds for the buttons.

CSS3 multiple backgrounds for browsers that could handle that, and in IE I used the DXTransform filter to add a second image (see here). The actual technique used was a pretty standard sliding door style setup, with some changes to account for the fact that you couldn't position the second image in IE other than at the top left.

For FF 3.5 and lower I used border-radius, since multiple backgrounds only came in 3.6.

Hover/active images worked fine, and it's all in CSS, which was a bonus.