Loading ...
Sorry, an error occurred while loading the content.

multiple panels not working correctly in IE6 but fine in firefox

Expand Messages
  • rob_barics
    So, ive added a complete page (a test page) below to show what im attempting. In firefox is comes out as I expect. However in IE6 the panels are not
    Message 1 of 1 , Mar 1 4:22 PM
    • 0 Attachment
      So, ive added a complete page (a test page) below to show what im
      attempting. In firefox is comes out as I expect. However in IE6 the
      panels are not anchoring to their contextual anchor properly. The
      first two have space between the top of the panel and the bottom of
      the contextual anchor point. Does anyone have any clue as to why this
      is happening and if Im doing something wrong? Thanks a million!

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>
      <head>
      <title>Yahoo Lib Test</title>

      <script type="text/javascript" src="yahoo.js"></script>
      <script type="text/javascript" src="event.js" ></script>
      <script type="text/javascript" src="dom.js" ></script>
      <script type="text/javascript" src="container.js"></script>

      <link type="text/css" rel="stylesheet" href="container.css">

      <script type="text/javascript">




      /*BEGIN Yahoo panel*/
      //Failure message
      YAHOO.namespace("widget.container");
      function init() {
      //instantiate panels
      YAHOO.widget.container.panel1 = new YAHOO.widget.Panel("panel1", {
      width:"300px", height:"300px", visible:false, draggable:false,
      modal:true, constraintoviewport:true, context: ["show1", "tl", "bl"] } );
      YAHOO.widget.container.panel1.render();

      YAHOO.widget.container.panel2 = new YAHOO.widget.Panel("panel2", {
      width:"300px", height:"300px", visible:false, draggable:false,
      modal:true, constraintoviewport:true, context: ["show2", "tl", "bl"] } );
      YAHOO.widget.container.panel2.render();

      YAHOO.widget.container.panel3 = new YAHOO.widget.Panel("panel3", {
      width:"300px", height:"150px", visible:false, draggable:false,
      modal:true, constraintoviewport:true, context: ["show3", "tl", "bl"] } );
      YAHOO.widget.container.panel3.render();

      //Event Listener
      YAHOO.util.Event.addListener("show1", "click",
      YAHOO.widget.container.panel1.show, YAHOO.widget.container.panel1, true);
      YAHOO.util.Event.addListener("hide1", "click",
      YAHOO.widget.container.panel1.hide, YAHOO.widget.container.panel1, true);

      YAHOO.util.Event.addListener("show2", "click",
      YAHOO.widget.container.panel2.show, YAHOO.widget.container.panel2, true);
      YAHOO.util.Event.addListener("hide2", "click",
      YAHOO.widget.container.panel2.hide, YAHOO.widget.container.panel2, true);

      YAHOO.util.Event.addListener("show3", "click",
      YAHOO.widget.container.panel3.show, YAHOO.widget.container.panel3, true);
      YAHOO.util.Event.addListener("hide3", "click",
      YAHOO.widget.container.panel3.hide, YAHOO.widget.container.panel3, true);

      }
      YAHOO.util.Event.addListener(window, "load", init);
      </script>
      </head>

      <body>
      <style>
      #show1, #show2, #show3 {color:red; text-decoration: underline;
      cursor:pointer;}
      #hide1, #hide2, #hide3 {color:red; text-decoration: underline;
      cursor:pointer;}
      </style>

      <div id="panel1">
      <div class="bd">
      <strong>Failure Message</strong>
      <hr style="height: 1px; color: #808080;"/>
      <p>Nullam in eros. Ut dictum dignissim urna. Aliquam erat
      volutpat. Maecenas at justo. Donec sit amet dui. Sed felis. Praesent
      blandit pede at libero. Cras massa lacus, tristique ut, vulputate sit
      amet, eleifend ut, enim. Ut quis velit et risus posuere ornare.
      Suspendisse at tortor sit amet lacus venenatis interdum.</p>
      <div class="fillerFive"> </div>
      <p>Duis sit amet purus. Suspendisse rhoncus. Fusce augue tortor,
      laoreet quis, rutrum et, vulputate et, nulla. Suspendisse dignissim
      orci id sapien. Fusce dictum magna quis felis rutrum convallis. Sed
      interdum dui vel urna. Aenean eros mi, facilisis ac, auctor</p>
      <hr style="height: 1px; color: #808080;"/>
      <a href="javascript:void(0);" class="redButton"
      title="Save">Save</a>  <span id="hide1"
      title="Cancel">Cancel</span>
      </div>
      </div>
      <div id="panel2">
      <span id="hide2">test</span>
      </div>
      <div id="panel3">
      <span id="hide3">test</span>
      </div>

      <span id="show1">show 1</span><br /><br /><br />
      <span id="show2">show 2</span><br /><br /><br />
      <span id="show3">show 3</span>


      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.