(solved) IE6 slidetoggle bug. Solutions?

(solved) IE6 slidetoggle bug. Solutions?

I'm having a problem with nested slide toggles in IE6. When the element slides out, part or all of the text will turn invisible. I can make it visible by highlighting the text. It works fine for all other version of IE and other browser (of course) Unfortunately my clients are going to have a lot of IE6 computers.

A picture of the problem


A picture after the text is selected.


HTML

  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <link rel="stylesheet" type="text/css" href="/css/redmond/jquery-ui-1.8.2.custom.css" />
  5. <link rel="stylesheet" type="text/css" href="/test.css" />
  6. <script src="/jquery-1.4.2.js" type="text/javascript"></script>
  7. <script src="/js/jquery-ui-1.8.2.custom.min.js"></script>
  8. <body>
  9. <div class="collapseBox" id="employees">
  10. <h1>Hit Me</h1>
  11. <div style="clear: both;"></div>
  12. <p>
  13. Here is some text <br />
  14. Just to play <br />
  15. Lets see if it will work <br />
  16. </p>
  17. </div>
  18. <div class="collapseBox" id="people">
  19. <h1>Hit Me</h1>
  20. <div style="clear: both;"></div>
  21. <p>
  22. Here is some text <br />
  23. Just to play <br />
  24. Lets see if it will work <br />
  25. </p>
  26. <div class="collapseBox" id="people">
  27. <h1>Hit Me</h1>
  28. <div style="clear: both;"></div>
  29. <p>
  30. Here is some text <br />
  31. Just to play <br />
  32. Lets see if it will work <br />
  33. </p>
  34. </div>
  35. </div>
  36. <script>
  37. $(document).ready(function (){
  38. $('<button>+</button>').insertAfter('div.collapseBox h1');
  39. $('div.collapseBox div').nextAll().slideUp('fast');
  40. $('div.collapseBox button').click(function () 
  41. { 
  42. var item = $(this);
  43. if (item.text() == "+")
  44. item.text('-');
  45. else
  46. item.text('+');
  47. item.next().nextAll().slideToggle('fast');
  48. });
  49. if ($.browser.msie && $.browser.version < 8)
  50. $('div.collapseBox h1').css({'float': 'left'});
  51. });
  52. </script>
  53. </body>
  54. </html>

CSS

  2. div.collapseBox
  3. {
  4. background-color: #eee;
  5. border: solid #222 1px;
  6. border-radius: 20px;
  7. padding: 0 10px 0 20px;
  8. margin: 1px 1px 1px 1px;
  9. overflow: auto;
  10. }

  12. div.collapseBox h1
  13. {
  14. font-size: 20px;
  15. display:inline;
  16. }

  18. div.collapseBox p
  19. {
  20. margin: 0 0 0 0;
  21. padding: 0 0 0 0;
  22. }

  24. div.collapseBox button
  25. {
  26. float:right;
  27. height: 20px;
  28. }