3

I have a problem with my z-index in IE only. When I load the data from the database, the use can scroll over logos and a CSS pop up box will display a description. It works fine in all browsers but IE. The pop up box z-index does not seem to be getting called. It will render above the logos that were drawn before that current logo, but will display under logos that were drawn after.

SEE http://tempcfo.com/testimonials.php

here is my code

CSS...

.thumbnail{
position: relative;
}

.thumbnail:hover{
text-decoration:none;

}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:left;
z-index:0;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
left:135px; /*position where enlarged image should offset horizontally */
float:left;
text-decoration:none;
z-index:500;
}

.thumbnail2{
position: relative;

}

.thumbnail2:hover{
text-decoration:none;

}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}

.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:right;
z-index:0;
}


.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
right:138px; /*position where enlarged image should offset horizontally */
float:right;
text-decoration:none;
z-index:500;

}

HTML...

<div id="logos" >
        <table cellspacing="5" >
             <tr>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">




            <a class="thumbnail"  href="#success_page" style="border:none; outline:none; cursor:default;">
            <img src="images/logo/20120830005810.png"width="85%" border="0" />


            <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    “I hired tempCFO on a contracting basis to be the first CFO of my start-up company. They performed their role extremely well, building up our chart of accounts, developing a sophisticated financial model, creating powerful board presentations and overseeing the accounting function.
-Tom Mohr, Digital Air Strike                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                     Tom Mohr - Digital Air Strike                     </td>
                </tr>
            </table>
            </span>

    </a>




     <table  width="138" >


              </table>
            </td>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">




            <a class="thumbnail"  href="#success_page" style="border:none; outline:none; cursor:default;">
            <img src="images/logo/20120830005827.png"width="85%" border="0" />


            <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    Mitrionics AB is the technology leader in FPGA-based processing for Accelerated Computing, providing greater processing performance and a greener computing alternative, because of lower energy consumption.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>

    </a>




     <table  width="138" >


              </table>
            </td>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">





            <a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">

            <img src="images/logo/20120830005843.png"width="85%" border="0" />

           <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    RelayHealth provides connectivity solutions that make it easy for consumers and healthcare organizations to securely exchange information.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>

    </a>






     <table  width="138" >


              </table>
            </td>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">





            <a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">

            <img src="images/logo/20120830005855.png"width="85%" border="0" />

           <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    Propero Solutions offers world-class expertise in agile software development, Scrum methodology, agile project management, extreme programming (XP), lean and kanban development methods.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>

    </a>






     <table  width="138" >


              </table>
            </td>
                         </tr>
                <tr>        
            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">




            <a class="thumbnail"  href="#success_page" style="border:none; outline:none; cursor:default;">
            <img src="images/logo/20120830005906.png"width="85%" border="0" />


            <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    Glam Media is the pioneer and global leader of Vertical Media—a revolutionary new media model that combines our flagship properties with curated publisher sites and their passionate, engaged audiences.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>



    </a>

......

Thanks for any Help.

1
  • Seems to be a CSS issue so don't give us PHP code. Give us the html code that is created (View -> Source)
    – Andy
    Nov 13, 2012 at 16:01

2 Answers 2

1

I figured this out. The page was old and written by someone else. they were using this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

once I upgraded to

<!DOCTYPE html>

z-index started working correctly. So simple, so many hours wasted.

0

I am pretty sure that this has to do with the way IE handles z-index. In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly - giving the parent element a higher z-index would normally fix the bug.

I was going to see if I could give you an example of how to change your code, but it seems you are making changes on the example URL you provided.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.