Navigation links with multiple images for a fluid width

Question

I'm trying to create a navigation menu with menu items that don't always have a fixed width. Because of this, I'm trying to use a technique where I have the <a> element as one background image, and then a <span> element within the <a> having a different background image. I remember seeing this technique a long time ago and recalling it from memory just isn't working. Here's my menu markup:

<div id="nav">
    <ul>
        <li>
            <a href="">Home<span></span></a>
        </li>
    </ul>
</div>

And my CSS this far:

#nav {
    height: 35px;
    width: 942px;
    background: url('images/nav_bg.png');
    border: 1px solid #74818c;
    border-radius: 3px;
}

#nav ul li a {
    display: inline-block;
    background: url('images/nav_button_left_idle.png');
    line-height: 32px;

}

#nav ul li a span {
    display: inline-block;
    background: url('images/nav_button_right_idle.png');
    line-height: 32px;
    width: 5px;
}

To elaborate a bit more, this is the background image used on my <a> tags:

and the one used on the <span> element:

Any help would be appreciated, thanks!

Answer 1

You need to set the height and position of your span"

#nav ul li a {
    display: inline-block;
    background: url('images/nav_button_left_idle.png');
    line-height: 32px;
    position:relative;
}

#nav ul li a span {
    display: inline-block;
    background: url('images/nav_button_right_idle.png');
    height: 32px;
    width: 5px;
    position:absolute;
    top: 0;
    right: 0
}