Sprite background - inline nested? (html frozen)

Question

Here's another CSS changes only question. [ Demonstrated here

So, I have a background sprite for some styling elements, and want to style textfields with endcaps (TEXTFIELD) and a repeating background. I've lined things up using padding spaces here in the example, which lets me set background-color, but not a background I think. I've been staring at this for too long, and need some advice. Is it possible to line things up the way I want them, without changing the HTML?

<label> Enter Zipcode: </label>
<span class='bg'>
    <span class='leftcap'>
        <span class='rightcap'>
           <input type="text" class="textfield" name="zipCode" />
        </span>
    </span>
</span>    

edit: I'm spitting angry over here, somehow lost my jsfiddle, and gar. My question still stands... the other jsfiddle linked shared a couple similarities, and served as a base, but I ended up changing almost everything by the time I had it set up. Good thing I copied a little over here.

edit2: here is a partial remade jsfiddle. http://jsfiddle.net/dreamling/P3Jev/3/

Answer 1

• I changed outer2 to display:inline-block, that fixes it.

• The strange gaps are there because inline-block elements are whitespace dependend (and a whitespace is exactly 4px at standard font-size)

• Fix: add letter-spacing:-4px + line-height: 1px.

See http://jsfiddle.net/L8TyD/6/

EDIT: i removed the fixed width, and added hack to make it work in ie7