Question

Have a look at http://www.amordetango.nl/txp/ … on a Mac Chrome is doing fine. Firefox isn’t showing h1 and h2 … !?

A little help is needed here!

The code of the three elements is somewhat complex because h1 and h2 have to be centered and h2 has to be slightly on top of h1 … look with Chrome and you’ll see what I mean.

hgroup 
{
    position: relative;
    text-align: center; /* to center h1 en h2 */
    z-index: 1;
}

h1 
{
    font-family: 'BebasNeueRegular', sans-serif;
    color: #fff;
    line-height: 100%;
    font-weight: normal;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin-top: -50%; /* half the height */
    margin-left: -50%; /* half the width */
    z-index: 2;
    letter-spacing: 0.15em;
    padding-left: 0.15em; /* to compensate letter-spacing h1 */
}

h2 
{
    font-family: 'MutluOrnamental', sans-serif;
    line-height: 100%;
    font-weight: normal;
    color: #b7b7b7;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin-top: -50%; /* half the height */
    margin-left: -50%; /* half the width */     
    z-index: 3;
    padding-top: 10px; /* !important > to make h2 fit in relation to h1 */
}

/* for all browser including all IE! */
h2 {
    opacity: 0.75;
    zoom: 1;
    filter: alpha(opacity=75);
}

Answer 1

It seems that Firefox is interpreting the z-index correctly. The issue is instead with margin-top: -50% on the h1 and h2 which is moving them out of sight.