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