accordions in tabs broken in IE

accordions in tabs broken in IE

Here's a simple example of using accordions inside tabs that seems to work in every browser but IE. Is there something I can do differently to get this to work in IE? You'll have to modify my link and script tags to point to the location of your jQueryUI files.

<html>
  <head>
    <link rel="stylesheet" type="text/css"
      href="../../jquery-ui-1.8.4.custom/css/ui-lightness/jquery-ui-1.8.4.custom.css"/>
    <script type="text/javascript"
      src="../../jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript"
      src="../../jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        // It seems to be necessary to call "accordion" before "tabs"!
        $('#a1, #a2').accordion();
        $('#tabs').tabs();
      });
    </script>
  </head>
  <body>
    <div id="tabs">
      <ul>
        <li><a href="#t1">Tab 1</a></li>
        <li><a href="#t2">Tab 2</a></li>
      </ul>
      <div id="t1">
        <div id="a1">
          <h3><a href="#">Panel 1</a></h3>
          <div>a1-p1</div>
          <h3><a href="#">Panel 2</a></h3>
          <div>a1-p2</div>
        </div>
      </div>
      <div id="t2">
        <div id="a2">
          <h3><a href="#">Panel 3</a></h3>
          <div>a2-p3</div>
          <h3><a href="#">Panel 4</a></h3>
          <div>a2-p4</div>
        </div>
      </div>
    </div>
  </body>
</html>