Why is my webkit gradient removing my span element?

Question

Here's my code:

<h3><a href="#" title="Desserts">Desserts</a> <span>+</span></h3>

And here's my style that accompanies said code:

#our_menu h3 span {
color: #eee;
display: block;
float: right;
font-size: 11.5pt;
margin-top: -25pt;
margin-right: 10pt;
text-shadow: 0px 1px 0px #240d00; }

#our_menu h3:first-child a {
border-top: 1px solid #692601;
background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.1, rgb(201,86,19)),
    color-stop(1, rgb(159,58,0))
); }

This is being used on a mobile site that I'm building and for some reason the span is being killed by the webkit gradient. Has anyone experienced anything like this before? If I remove the gradient then the span reappears :(

Thanks!

Answer 1

Figured it out. The span is not part of the link and the gradient style is being applied to the link which renders over top of the span. I made the span relative with a z-index and it works fine. Good grief.