CODEWITHSUNDEEP
cssz-index
REDFOX
REDFOX

Reputation: 171

z-index is working in Chrome ... not in Firefox ...?

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);
}

Upvotes: 1

Views: 2770

Answers (1)

Michael Bird
Michael Bird

Reputation: 834

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.

Upvotes: 1

Related Questions