Accordion rendering issues in IE

I am using the accordion within a layout container and there are several rendering issues that I see in IE6 & IE7. I saw many issues at 1.0.2, a couple of which seemed to have been fixed at 1.1.0rc2, but the accordion still has issues. I put together a sample test case by just copying code from the Dojo book.

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Accordion Demo</title>

    <style type="text/css">

      @import "../../../js/dojo1.1.0rc2/dijit/themes/tundra/tundra.css";

      @import "../../../js/dojo1.1.0rc2/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="../../../js/dojo1.1.0rc2/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true">

    </script>

    <script type="text/javascript">

      dojo.require("dojo.parser");

      dojo.require("dijit.layout.AccordionContainer");

      dojo.require("dojo.parser");

      dojo.require("dijit.ColorPalette");

      dojo.require("dijit.form.ComboBox");

      dojo.require("dijit.form.Slider");


      function setVal1(value) {

        console.debug("Selected "+value);

      }


      function reportColor(selectedColor) {

        console.debug(selectedColor);

      }

    </script>

  </head>

  <body class="tundra">

    <div dojoType="dijit.layout.AccordionContainer" duration="200" style="margin-right: 30px; width: 400px; height: 300px; overflow: hidden">

      <div dojoType="dijit.layout.AccordionPane" title="Pane 3">

        More content

        <ul>

          <li>

            One

          </li>

          <li>

            Two

          </li>

          <li>

            Three

          </li>

        </ul>

        I am going to add a Color palette:

        

        <div dojoType="dijit.ColorPalette" onChange="reportColor"></div>

        

        A combo box:

        

        <select name="state1"

                dojoType="dijit.form.ComboBox"

                autocomplete="false"

                value="California"

                onChange="setVal1">

                <option selected="selected">California</option>

                <option >Illinois</option>

                <option >New York</option>

                <option >Texas</option>

        </select>

        

        And finally a slider

        

        <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"

           value="5" minimum="-10" maximum="10" discreteValues="11"

           intermediateChanges="true"

           onChange="dojo.byId('horizontalSlider').value = arguments[0];"

           handleSrc="../../../js/dojo1.1.0rc2/dijit/themes/tundra/images/preciseSliderThumb.png"

        ></div>

      </div>

      <!-- content inline -->

      <div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1">

        

          Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin ...

        

      </div>

      <!-- loading by indirect reference -->

      <div dojoType="dijit.layout.AccordionPane" title="Pane 2 (lazy load)" href="/dojoroot/dijit/tests/layout/tab1.html">

      </div>

    </div>

  </body>
Once the page renders, switch to 'Pane 3'. You will see that the color palette overflows over the other panels. Also, scrolling down the content pane, by dragging the scroll bar down by Pane 3, the slider doesn't display properly either. This works fine in FF2 & Safari 3.1.
thanks

Jayant
‹ dijit.byId() broken? TextBox and a ghosted default value background ›
Search

Accordion rendering issues in IE
