ansaurus

Question

Answer 1

+1 A:

There are known issues with IE and z-index. Which version of IE are you using firstly? Also does this help? It looks related, you may need to get your code up to get this resolved -> http://www.webmasterworld.com/css/3337315.htm

Julian Young 2009-08-18 07:34:45

Answer 2

A:

What about changing the zIndex of iFrame to a negative value when the div appears and the changing it to a positive one when the div disappears.

This might help you.

INFO: How the Z-index Attribute Works for HTML Elements

rahul 2009-08-18 07:36:15

yes, i have tried this technique, its not even responding

praveenjayapal 2009-08-18 07:41:47

Answer 3

A:

A minimalistic demo page would help to illustrate your problem as IE has several z-index bugs.

A particularly tricky one concerns selectboxes, plugins and (pre IE6) iframes; see http://support.microsoft.com/default.aspx/kb/177378 for a description. In short, these kind of elements always come on top of everything regardless of z-index.

In IE6, you can sometimes use iframes to hack around this, for example by using a jquery plugin.

The second common IE z-index bug concerns z-index "rooting": all children of (IIRC) box-display elements should live in their own z-index scope wherein z-indexes only have meaning relative to one another. IE has a different implementation whereby z-index scope is more global.

Eamon Nerbonne 2009-08-18 08:06:24

Actually you can in IE6... it was back in IE5 that iframes were windowed elements. Probably this case is caused by the stacking context issue mentioned by Julian. Not that layering on top of an iframe is really a good idea, in any case.

bobince 2009-08-18 10:18:34

if that's so - then why can't IE render normal content on top of a selectbox/textbox, but *can* render an iframe on top of it? Are you sure you don't mean IE7 - in IE7 none of these controls are windowed.--- the stacking context issue is hard to identify without seeing source, but it's definitely an easy source of errors.

Eamon Nerbonne 2009-08-18 13:18:24

-1, there are no problems with text boxes or iframes. The select problem exists, and is very well commented. The reason IE can render an iframe on top of a select box is that it performs the trick of hiding all select boxes (or the relevant parts of them, I don't remember) that overlap iframes.

erikkallen 2010-02-24 11:48:05

You're quite right - iframes no longer cause this problem in IE6 - updating...

Eamon Nerbonne 2010-02-24 17:22:32

Answer 4

A:

why don't you use

#layer
{
 visibility:hidden;
}

and then change it to visible and then again hidden, the following function changes css

function changecss(theClass,element,value) {
     var cssRules;
     var added = false;
     for (var S = 0; S < document.styleSheets.length; S++){
    if (document.styleSheets[S]['rules']) {
      cssRules = 'rules';
     } else if (document.styleSheets[S]['cssRules']) {
      cssRules = 'cssRules';
     } else {
      //no rules found... browser unknown
     }
      for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
       if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
        if(document.styleSheets[S][cssRules][R].style[element]){
        document.styleSheets[S][cssRules][R].style[element] = value;
        added=true;
        break;
        }
       }
      }
      if(!added){
      if(document.styleSheets[S].insertRule){
              document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length);
            } else if (document.styleSheets[S].addRule) {
                document.styleSheets[S].addRule(theClass,element+': '+value+';');
            }
      }
     }
    }

call this function like this

javascript:changecss('#layer','visibility','visible');<br>
javascript:changecss('#layer','visibility','hidden');

Junaid Saeed 2009-08-18 13:52:14

ansaurus

tags:

views:

answers:

z-index not working in IE

related questions