css how to increase the size of rounded image button with varying text

Can somebody 开发者_如何学Pythonplease help me out on how to increase the size of the rounded button with respect to text. Please check the image:

I want to be able to write any length of text and rounded button will stretch automatically based on text.

Please help me on how to write CSS for to get this working ?

Note: I don't want to use CSS3 border-radius because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks

Use the Sliding Door Principle. http://www.alistapart.com/articles/slidingdoors/.

In sliding doors you have two extreme as images(rounded) between these images is a background. The images move (slide further) based on the length of the text.

ul {
    list-style-type: none;  
}
ul li {
    height: 31px; // height of the background image *reused below
    margin: 10px; // width of the left image *reused below
    float: left;
    background: url(left.png) no-repeat top left;
}
ul li div {
    height: 31px;
    margin-left: 10px;
    padding-right: 10px;
    background: url(right.png) no-repeat top right;
}

//used with

<ul>
    <li><a href="#"><div>text</div></a></li>
    <li><a href="#"><div>texttexttext</div></a></li>
    <li><a href="#"><div>texttexttexttext</div></a></li>
</ul>

I would probably opt for creating a div which inherits a css class like the following

<div class="button">TEXT HERE</div>

The CSS would be the following:

.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }

The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images