Rounded button - how to strech text inside it to full width - html

Question

I have created an image to illustrate my problem:
As you can see. I have a large rounded button. it consists of 3 images. One image is on the right side, another on the left size and another one in the middle.
The left and right images are quite wide because there is a gradient going on in the button so I cannot make them just 5px wide. The problem now is, that the text inside is limited to the middle area. I would like it to stretch across the entire button.
Here are my styles:
#index-navigation ul li a {
height: 96px;
line-height: 96px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: url('/images/btn_grey#2x-right.png') right center no-repeat;
padding-right: 100px;
}
#index-navigation ul li a span.left {
background: url('/images/btn_grey#2x-left.png') left center no-repeat;
padding-left: 100px;
}
#index-navigation ul li a span.middle {
background: url('/images/btn_grey#2x-middle.png') left center repeat-x;
}
How to edit the style to be able to have the anchor take the entire width of the button? Like this:

Answer 1

You have to move your text to a separate span to be able to stretch it across the whole a. Just give your .left and .right the appropriate backgrounds, let the a hold the main bg - http://jsfiddle.net/JutRB/3/
a {
height: 96px;
width: 350px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: beige;
border: 2px solid #000;
display: inline-block;
position: relative;
}
a span.left, a span.right {
float: left;
background: yellow;
height: 96px;
width: 100px;
display: inline-block;
}
a span.right {
float: right;
background: pink;
}
a span.text {
position: absolute;
display: block;
text-align: center;
top: 30px;
width: 100%;
}
​
UPDATE
Or if you want a CSS3 solution and don't care about the older IE-s then you can use the :before and :after pseudo-elements with much cleaner markup - http://jsfiddle.net/JutRB/4/

Answer 2

It's the sliding doors technique, falling out of favour nowadays with border-radius and graceful degradation to the old browsers getting traction in the marketplace.
The a tag in your demo does take the whole area as it wraps the inner 2 spans, you want to make sure you remove the width declaration though so it extends with the text.
If you've got a demo we could debug it a bit more specifically for you.