css - IE-7 image not coming on the top -

css - IE-7 image not coming on the top -

i showing tool-tip onmouseover of div. tooltip showing in firefox , ie8. in ie-7 coming behind div. html markup

<table cellspacing="0" cellpadding="5" border="0" id="tblemployee"> <tbody> <tr> <td> <div class="dvborder" empid="1" nomineeid="21"> <img style="padding: 5px;" src="../../images/user.jpg" alt="user"> <span class="empolyeename">first last</span><span class="employeeemail">mail@amdocs.com</span></div></td> </tr> </table>

when user mouseover on div.dvborder tool tip dynamicaly created help of jquery function.

function rollout(result,crntdiv) { $(crntdiv).children('img').before(createelems('div', 'rollovertip', result)); } function createelems(type,cssclass,value) { var elem = $(document.createelement(type)); if(value != null) elem.text(value); if(cssclass!= null) elem.addclass(cssclass); homecoming elem; }

the css class.

.rollovertip { background-image: url("/images/screen2-rollover-tooltip.png"); background-repeat: no-repeat; color: #000000; font-family: calibri regular; font-size: 18pt; height: 199px; line-height: 20pt; margin-left: 385px; position: absolute; width: 474px; z-index: 90000; padding:34px; } .dvborder { background-image: url(/images/screen2-button.png); background-repeat: no-repeat; height: 125px; width: 400px; cursor:pointer; position: relative; }

is problem css , since working in ie-8,ff.

try adding z-index .dvborder class:

.dvborder { background-image: url(/images/screen2-button.png); background-repeat: no-repeat; height: 125px; width: 400px; cursor:pointer; position: relative; z-index:0; /* if doesn't work, seek -1 */ }

css html position