css selecting text "inside" elements

I'm working on a site that uses a sliding door style tab menu 
(www.phatbloke.com)   I've got it working quite well but there's a 
niggle I'd like to try and solve.


I've set the z-index of the "tab base" to 1, so it's higher than the 
menu.  This helps in cross browser compatibility (slight positioning 
problems) and text resizing as the tabs can "disappear" behind it. 
However, in Firefox and Safari, when resizing to very large, the text 
also "disappears" behind the base.  I'm aware that I could add an extra 
span tag to the mark-up and set an appropriate z-index and that would 
solve the problem.  Trouble is I'm working with Joomla and I don't know 
how to add this mark-up.  Even if I did, it's not an elegant solution.

I'm aware that in the DOM model (with javascript) it's possible to 
target the text inside an element as opposed to the element itself. 
(can't remember how)  So I'm wondering, is the same possible with css or 
with a combination of javascript and css?

Just to clarify, the goal is to get the tabs to "disappear" behind the 
"base" but have the text inside the tabs appear on top.  Hope that all 
makes sense.

Cheers

Rich