IE6 Causes Z-Index Nightmares…

July 25, 2008

Rather than update the post from yesterday, this chaos deserves it’s own post.

Yesterday, I discussed layering Modal Popup Extenders with the Update Progress controls.  In IE7, FF3, and, well, most everything except IE6, it works like a champ as-is.

The “bug”?  After quite a bit of research, the problem revolves around the following issues:

  • lack of support for the { position: fixed } property,
  • lack of support for the { right; bottom} properties,
  • … unreliable suport for {height: 100%, width: 100% } properties,
  • general pain and suffering
  • <SELECT> tags (or ASP:DropDownList objects) exist above any other z-index,

I’m sure there were other issues.  Really.

After spending a good part of the day trying code, looking it up on QuirksMode, and trying again, I have somewhat of a solution; however, I still greatly dislike how it works in IE6.

On the MasterPage, I have a single UpdateProgress that isn’t associated to a specific UpdatePanel.  Therefore, it’ll catch all Async postbacks (and I only have ONE UpdateProgress control).

<asp:UpdateProgress

runat=”server” DisplayAfter=”100″ ID=”UpdateProgress”>

<ProgressTemplate>

<div class=”UpdateProgressModalBackground”></div>

<div class=”UpdateProgressPanel”>

<h3>Please wait…</h3>

<img src=”Images/ajaxbar.gif”
alt=”Please wait…”

style=”text-align: center; width: 100%; height: 10px; />

</div>

</ProgressTemplate>

</asp:UpdateProgress>

This, again, references our UpdateProgressModalBackground and UpdateProgressPanel styles.  These two styles are unchanged from the post yesterday.  Here they are again for reference:

/* UpdateProgressPanel is above EVERYTHING ELSE,

even other modal popups */

.UpdateProgressPanel

{

       z-index: 99999999;

       background-color:#fff;

       color:#fff;

       width: 200px;

       text-align: center;

       vertical-align: middle;

       position: fixed;

       bottom: 50%;

       left: 45%;

       padding: 10px;

       border: solid 2px #5D7B9D;

}

 

.UpdateProgressModalBackground

{

    z-index: 99999998;

    background-color: #6D7B8D;

    position: fixed;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    min-height: 100%;

    min-width: 100%;

    filter: alpha(opacity=50);

    opacity: 0.5;

    -moz-opacity: 0.5;

}

The UpdateProgress and these two classes work just fine in IE7+, FF2+.  So, now to fix IE6..

So, what’s the difference in IE6?  Well, we can’t use the positioning attributes in the above classes–-they won’t work properly. 

Issue #1 – Fitting the Popup and Background Without Positioning Attributes

Searching the web, I found an article by Damien White discussing his his same pains with this.  His solution involved using the IE-specific CSS “expressions” to calculate the height and width of the window.

height:

expression(

        document.documentElement.scrollTop +

        document.documentElement.clientHeight + “px”);

 

width: expression(document.body.clientWidth + “px”);

However, at least for me, Damien’s expressions wouldn’t handle scrolling down the page.

Damien explains:

The thinking behind this was to take the window height (which document.documentElement.clientHeight gives us) and then add the scroll top position, which will give us the upper portion if the user scrolls up.  The problem shows itself when the user scrolls down; that area is not covered.  The good thing about this is that I didn’t need to mess with the body height, but the solution isn’t optimal in the long haul.

That’s a bad deal because that’s the whole point!  Reading a bit more, there was a comment from Kunal Mukherjee on Damien’s post that solved the problem.

Kunal’s expressions looked at the scrollHeight of the window as compared to the offsetHeight and returned the larger.

height: expression(

document.body.scrollHeight > document.body.offsetHeight
? document.body.scrollHeight
: document.body.offsetHeight + ‘px’ )
;

Actually, that works really well. Cool.

Finally, I’d recommend, as Damien did, breaking out your CSS into two files—one for “IE6” and one for everyone else.  This is easily done using the IE-specific conditional statements.

<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”App_Themes/ie6/ie6.css” />
<![endif]–>

I also included !important flags on each of the properties in the ie6.css file—just to be safe.

Issue #2 – IE6 Pushes <SELECT> tags above everything else…

This is where the solution gets dicey; however, I’m relying on Kunal’s solution again.  In his comment, he pointed out a way to hide <SELECT> tags in IE6 without causing the disappearing act that the ModalPopupExtender causes—cover them with an IFRAME.

To me, this hack seems… sketchy at best, but it works.

In the ProgressTemplate of the UpdateProgress control, add in the IFRAME.

<iframe id=”UpdateProgressHideSelect”></iframe>

In the default.css (or the non-ie6.css, whatever you’ve called it), I recommend setting the iframe’s style to {display: none}—it isn’t needed outside IE6, don’t render it.🙂

On the ie6.css, add the UpdateProgressHideSelect in—along with another expression to place the iframe over the entire page (like the standard BackgroundCssClass of a ModalPopupExtender):

#UpdateProgressHideSelect

{

    z-index: 15000;

    position: fixed;

    top: 0;

    left: 0;

    background-color: #fff;

    border: none;

    filter: alpha(opacity=0);

    -moz-opacity: 0;

    opacity: 0;

    height: 100%;

    width: 100%;

    display: inline !important;

}

 

* html #UpdateProgressHideSelect

{

    position: absolute;

    height: expression(

document.body.scrollHeight > document.body.offsetHeight

? document.body.scrollHeight

: document.body.offsetHeight + ‘px’);

}

The z-index of 15000 for the iframe ensures that it appears above the normal 10000 of a ModalPopupExtender panel; however, under our crazy high UpdateProgress control.

Problem solved—for now.

Here’s how they look, side by side.

FireFox 3:

FireFox 3 Output

Nice and clean, properly centered given the size of the box and window size.  Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.

IE 7:

IE7 Output

Output as expected and where expected.  Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.

IE 6:

IE6 Output

Output as expected—basically where expected.  Drop down lists are hidden behind the IFRAME to prevent input.  Other controls are visible, including the MPE, but behind the background.

What fun!

  1. Dennis
    July 31, 2008 at 12:31 am

    Hi, I like your solution, but I can’t seem to get it to work.

    I’m using this together with the ModalPopupExtender.
    The positioning of the overlay starts from the middle of the screen, instead of top:0; left:0.

    PLease help.

    Please wait…

    Processing …

  2. Jason
    September 24, 2008 at 1:19 pm

    Did you get a solution to this for IE6?

    Thanks!

  3. Jack
    November 13, 2008 at 11:02 am

    Why didn’t you post the final CSS you created?

    I’ve tried using the if lt IE 7, but it doesn’t work because other non-ie browsers render what is in the if block.

  4. November 13, 2008 at 11:14 am

    @Jason-

    Yes, starting at about half way down, I detail the two issues with IE 6 (positioning attributes and SELECT tags) and how to work around them.

  5. November 13, 2008 at 11:17 am

    @Jack-

    You mean the actual .css file? I can find and send it to you if you’d like; however, the relevant code is here and the file I was working with had about 120 other styles in it that were nonpoint to the fix. In the end, it was too fragile to reproduce this time and time again–I ended up wrapping it up in a control:

    https://tiredblogger.wordpress.com/2008/08/11/wrapping-up-crossbrowserupdateprogress-into-a-control/

    You can check that post and download the full source, if you wish. I’m still looking for better ways to do this as well as handle it for cell phones (Mobile IE, iPhone Safari, etc).

  6. Jack
    November 13, 2008 at 5:40 pm

    I used your expression and it bombs my page🙂 Whatever other styles or what not, IE6 bombs when I use it.

    My modal works in everything except IE6 and below.

  7. November 13, 2008 at 6:21 pm

    I’ll work up a prototype site overnight and post it up to totally segment the CSS code.

    To help, could you qualify “bombs my page”?🙂 It might not be CSS related, but on how your AJAX implementation is working, etc. Does it throw something traceable with FireBug or similar?

  8. November 14, 2008 at 8:23 am

    @Jack-

    Example here:

    CrossBrowserExample.zip

    Includes project file, button to activate the UpdateProgress, and tested in IE6, IE7, IE8, Chrome, FireFox 3, and Opera 9.6.

  9. Jack
    November 18, 2008 at 5:40 pm

    Thanks a lot David. Ir sorta works lol There must be a conflict with the CSS I currently am using.

    I’ll try and work my way through it.

    Thanks!

  10. April 24, 2009 at 12:02 am

    I too am having nightmares with the z-index in IE6, you guys worked out how to set this over a fix positioned div?

    [___________] <—- fix positioned div
    | <—- scrolling down
    V
    [dropdownlist] <—- drop down list

    dropdownlist should be underneath the div section.

    help.

  1. July 25, 2008 at 11:49 am
  2. August 11, 2008 at 11:37 am
Comments are closed.
%d bloggers like this: