ansaurus

Question

ModalPopupExtender doesn't work on IE6 frame layout

Answer 1

A:

I've implemented a variant of the solution in this answer, which appears to solve the problem:

For IE6, conditionally make the #main div position:static with margin-left equal to the width of the #left div. Unfortunately margin-top doesn't seem to work in IE6, so...
For IE6, conditionally add an empty div with the id ie6-spacer before the main div.
Set the height of the ie6-spacer div to the same height as the #top div.

This appears to the trick.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>'Frames' using &lt;div&gt;s</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #top, #left, #main {
      position: fixed;
      overflow: hidden;
    }

    #top {
      top: 0;
      width: 100%;
      background-color: #ddd;
      height: 100px;
    }

    #left {
      left: 0;
      top: 100px;  /* move everything below #top */
      bottom: 0;
      background-color: #bbb;
      width: 120px;
    }

    #main {
      top: 100px;
      left: 120px;
      bottom: 0;
      right: 0;
      overflow: auto;
    }
  </style>
  <!--[if IE 6]>
  <style>
    #top, #left {
      position: absolute;
    }

    #ie6-spacer {
        height:100px;
    }

    #left {
      height: expression((m=document.documentElement.clientHeight-100)+'px');
    }

    #main {
      margin-left:120px;
      height: expression((m=document.documentElement.clientHeight-100)+'px');
      width: expression((m=document.documentElement.clientWidth-120)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="top">Title<br /></div>
  <div id="left">LeftNav<br /></div>
  <!--[if IE 6]>
  <div id="ie6-spacer"></div>
  <![endif]--> 
  <div id="main">
    <p>
        Lorem ipsum ...<br />
        <!-- just copy above line many times -->
    </p>
  </div>
</body>
</html>

Joe 2010-06-22 10:34:23

Nice you found this solution, but I don't think it's a neat one. I used these kind of pop-ups, too, and put a modal-dialog div apart from `#top`, `#left` and `#main` (etc.) with 100% width and height and a large z-index, covering everything when it was displayed (with a bit transparency). Above that one I put the div containing the dialog panel. But anyway, it works for you, so who cares…

Marcel Korpel 2010-06-22 14:41:31

@Marcel, thanks for commenting, and I'm certainly open to better solutions. My problem is that I'm using ASP.NET WebForms and AjaxControlToolkit, so don't have as much control on placement of the div. Currently I have a master page with the base layout (top/left/main divs and navigation), and a nested master page for pages that use popups that contains a placeholder for the main content, a ModalPopupExtender, and a placeholder for the popup content. The nested master page content is therefore inside the main div. app developers only need to concentrate on providing the main and popup content.

Joe 2010-06-22 16:21:17

Hi Joe, I already thought you had such restrictions. As I don't have any knowledge of ASP.NET whatsoever I can't give you advice on using WebForms and AjaxControlToolkit. But what I already said: if it ain't broke, don't fix it!

Marcel Korpel 2010-06-22 16:36:25

@Marcel, thanks again. I'll follow that advise, especially since the IE6 stuff is only for legacy support and will hopefully disappear before too long.

Joe 2010-06-22 17:17:34

ansaurus

tags:

views:

answers:

ModalPopupExtender doesn't work on IE6 frame layout

related questions