Give Cufón a higher z-index

I have an interesting goal that hopefully, with your help, will be achieved.

I have this HTML structure:

                <li>
                    <span class="buttonHighlight"></span>
                    <a href="#buy" class="button">BUY NOW</a>
                </li>            

That HTML + a few CSS lines gives me this:

IMG 1 (see below)

As you can see, the span.buttonHighlight is overlapping the button itself. Now, here comes the interesting part: The button is a simple anchor tag with cufonized text, that has a few CSS styles which give it that rounded-button background. Hence, what I want to achieve, is putting the 3 elements (CSS background, cufonized text and Highlight) in this order:

IMG 2 (see below)

What I've tried so far was to aim at each elem开发者_开发百科ent separately: The <span class="buttonHighlight"></span> as span.buttonHighlight, the CSS-driven background/box as a.button and the cufonized text as a.button .cufon . And luckily, the a.button .cufon is properly displaying; you can see it in FireBug:

IMG 3 (see below)

However, adding a z-index (of 101) that is superior to the z-index of span.buttonHighlight (100) did not help, i.e. the Highlight still overlapped the text.

You can find all the CSS styles relevant to this case here: pastie [dot] org/1478291

I really, really appreciate any help provided and your time.

Thank you so much!

Chris

**PS. Since I am not allowed to post images and only 1 hyperlink, i've stacked the 3 images below:

http://i.stack.imgur.com/Upe63.jpg:

z-index only works on positioned elements, you must specify postion:relative even if that is the default. Try this:

span.buttonHighlight {
background: url(assets/images/button_highlight.png) no-repeat top center;
    z-index: 100;
    position: relative;
}

and

a.button .cufon { 
    z-index: 101;
    position: relative;
}