JQuery Cycle Plugin & Z-Index Issues In IE & Firefox

JQuery Cycle Plugin & Z-Index Issues In IE & Firefox

Howdy - 

I've been building out a page for a client that is designed to rotate belts and buckles on a pair of jeans using three layers z-indexed on top of one another.  The belt is the bottom layer, then jeans, then the buckle on top.  Both the belt and buckle layers are implemented using the jquery cycle plugin while the jeans are just a static image.  As I've built the page, it runs fine in Chrome but has some major issues in firefox and internet explorer, either pushing the belt layer down over the controls or displaying white space where the images are supposed to be.  I can't for the life of me figure out what is going on with the other browsers and whether it is a CSS issues or something to do with the plugin itself.  Here is my html code followed by the CSS file managing its layout.  Can anyone help?  I'd really appreciate it!

  1. <html <?php language_attributes(); ?>>
  2. <head>
  3. <meta charset="<?php bloginfo( 'charset' ); ?>" />
  4. <title><?php
  5. /*
  6. * Print the <title> tag based on what is being viewed.
  7. */
  8. global $page, $paged;

  9. wp_title( '|', true, 'right' );

  10. // Add the blog name.
  11. bloginfo( 'name' );

  12. // Add the blog description for the home/front page.
  13. $site_description = get_bloginfo( 'description', 'display' );
  14. if ( $site_description && ( is_home() || is_front_page() ) )
  15. echo " | $site_description";

  16. // Add a page number if necessary:
  17. if ( $paged >= 2 || $page >= 2 )
  18. echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

  19. ?></title>
  20. <link rel="profile" href="http://gmpg.org/xfn/11" />
  21. <link rel="stylesheet" type="text/css" media="all" href="http://build-a-belt.com/wp-content/themes/twentyten/home-style.css" />
  22. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
  23. <!-- BEGIN JQUERY FOR BELT/BUCKLE ROTATOR -->
  24. <!-- include jQuery library -->
  25. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

  26. <!-- include Cycle plugin -->
  27. <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

  28. <!--  initialize the slideshow when the DOM is ready -->
  29. <script type="text/javascript">
  30. $(function() {
  31.     $('#bucklerotator').cycle({ 
  32.      fx: 'scrollDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
  33. speed: 'fast',
  34. manualTrump: true,
  35. timeout: 0,
  36.     });
  37.     $('#buckle1').click(function() { 
  38.         $('#bucklerotator').cycle(0); 
  39.         return false; 
  40.     });
  41.     $('#buckle2').click(function() { 
  42.         $('#bucklerotator').cycle(1); 
  43.         return false; 
  44.     });
  45. });
  46. </script>

  47. <script type="text/javascript">
  48. $(function() {
  49.     $('#beltrotator').cycle({ 
  50.      fx: 'scrollLeft', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
  51. speed: 'fast',
  52. manualTrump: true,
  53. timeout: 0,
  54.     });
  55.     $('#belt1').click(function() { 
  56.         $('#beltrotator').cycle(0); 
  57.         return false; 
  58.     });
  59.     $('#belt2').click(function() { 
  60.         $('#beltrotator').cycle(1); 
  61.         return false; 
  62.     });
  63. });
  64. </script>
  65. <!-- END JQUERY FOR BELT/BUCKLE ROTATOR --> 
  66. </head>

  67. <body>

  68. <div id="container">
  69. <div id="bucklerotator" class="bucklerotator">
  70. <img class="buckle" src="../images/buckle1.png" />
  71. <img class="buckle" src="../images/buckle2.png" />
  72. </div>

  73. <div class="jeans">
  74. <img class="jeans" src="../images/jeans.png" />
  75. </div>

  76. <div class="beltouter"
  77. <div id="beltrotator" class="beltrotator">
  78. <img class="buckle" src="../images/belt1.jpg" />
  79. <img class="buckle" src="../images/belt2.jpg" />
  80. </div>
  81. </div>

  82. <div class="triggers">
  83. <input type="button" id="buckle1" value="Goto Buckle 1" />
  84. <input type="button" id="buckle2" value="Goto Buckle 2" />
  85. <input type="button" id="belt1" value="Goto Belt 1" />
  86. <input type="button" id="belt2" value="Goto Belt 2" />
  87. </div>
  88. <div class="prodsliders">
  89. </div>

  90. </body>
  91.  

  1. /* BEGIN CSS FOR BELT/BUCKLE ROTATOR */

  2. .bucklerotator {
  3. width: 900px;
  4. height: 300px;
  5. list-style: none;
  6. position: absolute;
  7. left: 50%;
  8. top: 100px;
  9. text-align: left;
  10. margin-left: -450px;
  11. padding: 0;
  12. }

  13. .bucklerotator img.buckle {
  14. margin: 0px;
  15. padding-bottom: 0px;
  16. position: absolute;
  17. top: 0px;
  18. left: 0px;
  19. width: 900px;
  20. height: 300px;
  21. z-index: 3;
  22. }

  23. .jeans {
  24. width: 900px;
  25. height: 300px;
  26. list-style: none;
  27. position: absolute;
  28. left: 50%;
  29. top: 100px;
  30. text-align: left;
  31. margin-left: -450px;
  32. padding: 0;
  33. }

  34. .jeans img.jeans {
  35. margin: 0px;
  36. padding-bottom: 0px;
  37. position: absolute;
  38. top: 0px;
  39. left: 0px;
  40. width: 900px;
  41. height: 300px;
  42. z-index: 2;
  43. }

  44. .beltrotator {
  45. width: 900px;
  46. height: 300px;
  47. list-style: none;
  48. position: absolute;
  49. left: 50%;
  50. top: 100px;
  51. text-align: left;
  52. margin-left: -450px;
  53. padding: 0;
  54. }

  55. .beltouter {
  56. width: 900px;
  57. height: 300px;
  58. list-style: none;
  59. position: absolute;
  60. left: 50%;
  61. top: 100px;
  62. text-align: left;
  63. margin-left: -450px;
  64. margin-top: 0px;
  65. margin-right: 0px;
  66. margin-bottom: 0px;
  67. padding: 0;
  68. z-index: 1;
  69. }

  70. .beltrotator img.belt {
  71. padding: 0px;
  72. position: absolute;
  73. top: 100px;
  74. left: 50%;
  75. margin-left: -450px;
  76. width: 900px;
  77. height: 300px;
  78. }

  79. .triggers {
  80. width: 900px;
  81. height: 25px;
  82. list-style: none;
  83. position: absolute;
  84. left: 50%;
  85. top: 450px;
  86. text-align: left;
  87. margin-left: -450px;
  88. padding: 0;
  89. }

  90. /* END CSS FOR BELT/BUCKLE ROTATOR */


  91. /* BEGIN CSS FOR BELT/BUCKLE PRODUCT SLIDERS */
  92. div.prodsliders {
  93. padding-top: 300px;
  94. }

  95. /* END CSS FOR BELT/BUCKLE PRODUCT SLIDERS */

  96. /* BEGIN CSS FOR Bottom Navigation */
  97. div.bottomnav {
  98. width: 940px;
  99. height: 38px;
  100. list-style: none;
  101. position: absolute;
  102. top: 492px;
  103. text-align: left;
  104. padding: 0;
  105. }