Z-index not working in IE7?

HTML & CSS
1

Hi,

I thought it would be simple to fix this, but I can’t seem to get it to work. Hopefully someone here knows how to fix it.

I made this tooltip that shows up when you hover over the question mark. But in IE the question mark shows through the black background color of the tooltip. I set the z-index for the question mark to 1 and the tooltip as high as 1000. But it doesn’t seem to have any effect at all.

You can see an example here http://www.tijmensmit.com/dev/jquery/

Any idea’s how to fix this? Thanks :slight_smile:

2

Hi,
It’s a z-index bug in IE6/7, and it is also happening in IE8 with you because you are using the IE=EmulateIE7 meta tag. That is the first thing I would remove since IE8 would be better off getting the same css as all other modern browsers.

To fix IE7 you will need to add a new class similar to your .company_name class. It just needs to be called .company_name2, that is where you will manually set the stacking order.

There is no need to set z-index on the a or the img, I commented them out in red.


    .company_name {position:relative;[B]z-index:2[/B];}
    .company_[B]name2[/B] {position:relative;[B]z-index:1;[/B]}    
        .company_tooltip {
            display:none; 
            position:absolute; 
            top:25px;
            left:-66px;
            background: url(tooltip_arrow.png) center top no-repeat;
            color:#fff;
            padding:12px 8px 6px 8px;
            text-align:center;
            [B]z-index:1;[/B]
            width:100px;
            zoom:1;
            visibility:visible;
        }
        
        .company_tooltip p {padding:0; margin:0;}
        
    .sign-up_company {position:absolute; left:-13px; top:4px;/* [COLOR=Red]z-index:1;*/[/COLOR]}
    
  [COLOR=Red]  /*.sign-up_company img {position:relative; z-index:1;}*/[/COLOR]

Now add that new class in the html -


                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td class="form-names">    
                                    <div class="company_[B]name[/B]">
                                            <a class="sign-up_company" href="#">
                                                <img src="questionmark.gif" width="7" height="7" alt="" />
                                               </a>
                                             <div class="company_tooltip">
                                                <p>Description of your email address</p>
                                            </div>
                                    </div> Email address
                                </td>
                                <td>[email address]</td>
                              </tr>
                              <tr>
                                <td class="form-names">
                                    <div class="company_[B]name2[/B]">
                                            <a class="sign-up_company" href="#">
                                                <img src="questionmark.gif" width="7" height="7" alt="" />
                                               </a>
                                            <div class="company_tooltip">
                                                <p>Description of your password</p>
                                            </div>
                                    </div> Password</td>
                                <td><input name="" type="text" class="signup-input"/></td>
                              </tr>
                            </table>

That should get it straightened out and you will also need to add that new class in your js.

You do realize that you do not need jQuery to do a pop up tooltip.
It can be done with pure css. :wink: