1

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 element 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:

https://i.stack.imgur.com/Upe63.jpg: alt text

thirtydot
  • 224,678
  • 48
  • 389
  • 349
cr0z3r
  • 711
  • 4
  • 9
  • 24

1 Answers1

0

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;
}
Brent Friar
  • 10,588
  • 2
  • 20
  • 31
  • Hey, thanks and sorry, I actually erased a part of the CSS code when uploading it to pastie.org... span.buttonHighlight actually has a position:absolute and z-index: 100, and a.button .cufon has a position:relative (and you can imagine how the layout would screw up with I set this to absolute). – cr0z3r Jan 19 '11 at 21:10
  • Hmm. In that case, take a look here - http://stackoverflow.com/questions/2191624/cufon-text-z-index-ie6-and-ie7-stylish-select-box-bug/2483870#2483870 You may have to give the UL a z-index to make it work. – Brent Friar Jan 20 '11 at 02:58