Плагин JQuery Cycle не работает в IE - Кто может помочь? - PullRequest
Новая
       29

Плагин JQuery Cycle не работает в IE - Кто может помочь?

1 голос
/ 09 октября 2009

В настоящее время я разрабатываю сайт для клиента, который использует плагин цикла JQuery для перемещения по нескольким разделам, которые содержат фотографии и информацию о свадебных платьях.

Все отлично работает в Firefox, но когда я тестирую в IE6 + IE7, все div'ы располагаются друг над другом вертикально и растягиваются по экрану на тысячи пикселей.

Мне кажется, что это проблема абсолютного / относительного позиционирования или z-индекса, я также использовал несколько значений с плавающей точкой в ​​дочерних элементах div. Я также использую SIFR для замены текста, это может быть противоречивым?

Вот мой код, может кто-нибудь увидеть проблему, которая заставила бы мой цикл не работать в IE .?

XHTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Wedding Dresses ~ Cavendish Bridal House</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/sifr.css" type="text/css" media="screen" />  

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />    
<![endif]-->

<!--[if lt IE 7]>
 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" 
 type="text/javascript">
 </script>

 </script>
<![endif]-->

<script src="js/sifr.js" type="text/javascript"></script>  
<script src="js/sifr-config.js" type="text/javascript"></script>    
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function initMenu() {
    $('#menu ul').hide();
    $('#menu ul#dressessub').show();
    $('#menu li a').click(
    function() {
    var checkElement = $(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    return false;
    }
   if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
   $('#menu ul:visible').slideUp('normal');
   checkElement.slideDown('normal');
   return false;
   }
   }
   );
   }
   $(document).ready(function() {initMenu();});
</script>

<script type="text/javascript">
$(document).ready(function() {
$('#wedding-dresses').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' ,
    }); 
    }); 
</script>



</head>

<body id="wedding-dress">

<div id="page-outer">
<div class="container_12" id="page">

<div class="grid_12" id="header">

         <div id="logo">
            <a href="index.html" class="logo" title="Cavendish Bridal House">Cavendish Bridal House Hayfield</a>        </div><!--end logo-->
</div><!--end header-->
<div id="content">
<div id="label">
  <ul id="menu">
                           <li><a href="index.html" id="home" title="Home" >Home</a></li>
                           <li><a href="georgia.html" id="georgia"  title="Georgia">Georgia</a></li>
                           <li><a href="the-shop.html" id="shop"  title="The Shop">The Shop</a></li>
                           <li class="headlink"><a href="#" id="your-dress"  title="Your Dress">Your Dress</a>
                                   <ul>
                                        <li><a href="what-to-expect.html" title="What to expect" id="expect">What to expect</a></li>
                                        <li><a href="ordering-your-dress.html" title="Ordering your dress" id="ordering" >Ordering your dress</a></li>
                                        <li><a href="alterations.html" title="Alterations" id="alterations" >Alterations</a></li>
                                        <li><a href="collections.html" title="Collections" id="collections" >Collections</a></li>
                                   </ul>
                           </li>

                           <li class="headlink"><a href="dresses.html" id="dresses"  title="Dresses">Dresses</a>
                           <ul id="dresses-sub">
                                <li><a href="wedding-dresses.html" id="wedding"  title="Wedding Dresses">Wedding Dresses</a></li>
                                <li><a href="bridesmaid-dresses.html" id="bridesmaid" title=" Bridesmaid Dresses">Bridesmaid Dresses</a></li>
                                <li><a href="prom-dresses.html" id="prom"  title="Prom Dresses">Prom Dresses</a></li>
                             </ul>
                           </li>    
                          <li><a href="accessories.html" id="accessories" title="Accessories">Accessories</a></li>
                          <li><a href="mens-formal-hire.html" id="formal"  title="mens Formal Hire">Mens Formal Hire</a></li>
                          <li><a href="my-brides.html" id="my-brides"  title="My Brides">My Brides</a></li>
                          <li><a href="events.html" id="events"  title="Events">Events</a></li>
                          <li><a href="contact.php" id="contact"  title="Contact">Contact</a></li>
                          <li><a href="press.html" id="press"  title="Press">Press</a></li>
                          <li><a href="links.html" id="links"  title="Links">Links</a></li>
        </ul>
                  <div class="clear"></div>
      </div>
<div id="right">

    <div id="gallery">
    <div class="nav"><a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a></div>

<div id="wedding-dresses">
       <div class="panel" id="felice"> 
 <img src="img/wedding-dresses/felice.png" width="331" height="437" alt="Felice"/>
        <div class="description">
            <h3 class="range">Felice</h3>
            <p>Felice is an extraordinary strapless slim A-line gown made of lavish lace. It features a ruched Empire bust line ornamented with hand-beaded embellishment, asymmetrical side draped midriff and functional corset back with a chapel train..</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
        <div class="accessory">
            <img src="img/accessories/waistcoats/embroided-slate-swirl.png" width="109" height="110" alt="Embroided Slate Swirl Waistcoat"  />
            <p>Embroided Slat Swirl Waistcoat </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/necklace-1.png" width="109" height="84"  alt="necklace"/>
            <p>Necklace</p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end felice panel-->

          <div class="panel" id="julianne"> 
      <img src="img/wedding-dresses/julianne.png" width="331" height="437" alt="Julianne"/>
        <div class="description">
            <h3 class="range"> Julianne</h3>
            <p>Crafted from taffeta, extraordinary strapless A-line gown, Julianne features a crisscross woven bodice embellished with delicate hand-beaded and embroidered appliqués. Julianne’s functional corset back, A-line skirt and embellished chapel train create an exquisite look.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
        <div class="accessory">
            <img src="img/accessories/waistcoats/black-quill.png" width="109" height="110"  alt="Black Quill Waistcoat" />
            <p>Black Quill Waiscoat </p>
         </div> <!--end accessory-->
         <div class="accessory">
            <img src="img/shoes/bridal-lady.png" width="109" height="84" alt="Bridal Shoes" />
            <p>Lady Bridal Shoes </p>
         </div>   <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end julianne panel-->

              <div class="panel" id="renee"> 
      <img src="img/wedding-dresses/renee.png" width="331" height="437" alt="Renee"/>
        <div class="description">
            <h3 class="range">Renee</h3>
            <p>This alluring sequined lace over luxurious satin strapless ball gown features a crisscross sweetheart neckline enhanced with a lavish hand-beaded Empire waistline.  The feminine sequined lace gathers at the hip and flows down the chapel length train from the functional corset back. </p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
        <div class="accessory">
            <img src="img/accessories/waistcoats/champagne-quill.png" width="109" height="110"  alt="Champagne Quill Waistcoat"/>
            <p>Champagne Quill Waistcoat </p>
         </div> <!--end accessory-->
         <div class="accessory">
            <a href="accessories.html#jewellery"><img src="img/accessories/ivory-pearl-earings.png" width="109" height="84"  alt="Ivory Pearl Earings"/></a>
            <p>Ivory Pearl Earrings </p>
         </div>   <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end renee panel-->

                  <div class="panel" id="susanne"> 
      <img src="img/wedding-dresses/susanne.png" width="331" height="437" alt="Susanne"/>
        <div class="description">
            <h3 class="range">Susanne</h3>
            <p>The elegance of Susanne is revealed through a uniquely A-line silhouette. The asymmetrical draped bodice features a strapless sweetheart neckline and is detailed with hand-beaded lace motifs.  Susanne also includes a functional corset back with a chapel train.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
              <div class="accessory">
            <img src="img/shoes/bridal-mellow.png" width="109" height="84"  alt="Mellow Bridal Shoes"/>
            <p>Mellow Bridal Shoes. </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/diamante-pearl-earings.png" width="109" height="84"  alt="Diamante Pearl Earings" />
            <p>Diamante Pearl Earrings </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end suanne panel-->

                      <div class="panel" id="emilie"> 
      <img src="img/wedding-dresses/emilie.png" width="331" height="437" alt="Emilie"/>
        <div class="description">
            <h3 class="range">Emilie</h3>
        <p>This imperial two-piece strapless luxurious satin gown offers a side gathered bodice accentuated with soft hand-beaded lace motifs.  Emilie’s gorgeous crisscross draping at the hip effortlessly flows into the chapel length train. A detachable lace over illusion modesty piece with back covered buttons creates a higher neckline and three-quarter length sleeves.  A functional corset back completes the flattering and elegant look.</p>
<div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/waistcoats/brown-swirl.png" width="109" height="110"  alt="Brown Swirl Waiscoat"/>
            <p>Brown Swirl Waiscoat </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/necklace-1.png" width="109" height="84"  alt="Necklace"/>
            <p>Necklace </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end emilie panel-->

                          <div class="panel" id="titiana"> 
      <img src="img/wedding-dresses/titiana.png" width="331" height="437" alt="Titiana"/>
        <div class="description">
            <h3 class="range">Titiana</h3>
            <p>Crafted from sumptuous satin, Titiana presents a stunning A-line silhouette with an asymmetrical draped bodice tat spills around the bodice, emphasised by hand-beaded appliqués. The corset back is concealed with a hand-beaded organza overlay. Pleats in the back of the skirt along with the chapel length train completes the look for this grand dame of the season.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/bracelet-2.png" width="109" height="84" alt="Bracelet" />
            <p>Bracelet</p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/tiara-1.png" width="109" height="84"  alt="Tiara" />
            <p>Tiara </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end titiana panel-->

                              <div class="panel" id="diana"> 
      <img src="img/wedding-dresses/diana.png" width="331" height="437" alt="Diana"/>
        <div class="description">
            <h3 class="range">Diana</h3>
            <p>Modern elegance resonates from this classic A-line satin gown. Diana displays a decadent lace bateau neckline and lace appliqués ornament the draped bodice, lower skirt and chapel train. The scoop back bodice features a back zipper concealed with buttons.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/bracelet-3.png" width="109" height="84"  alt="Bracelet" />
            <p>Bracelet </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/shoes/bridal-paradise.png" width="109" height="84"  alt="Paradise Bridal Shoes" />
            <p>Paradise Bridal Shoes</p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end diana panel-->

                                  <div class="panel" id="beth"> 
      <img src="img/wedding-dresses/beth.png" width="331" height="437" alt="Beth"/>
        <div class="description">
            <h3 class="range">Beth</h3>
            <p>Individually styled Beth will transform any bride into a goddess. This sleek strapless charmeuse A-line gown features an elaborate hand-beaded insert at the neckline, lightly gathered bust detail and intricately hand-beaded accents on the bodice and across the skirt. Beth’s chapel length train also features matching hand-beading with a corset back.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/necklace-1.png" width="109" height="84"  alt="Necklace"/>
            <p>Necklace. </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/ivory-pearl-earings.png" width="109" height="84" alt="Ivory Pearl Earings"  />
            <p>Ivory Pearl Earrings </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end beth panel-->

      <div class="panel" id="petra"> 
      <img src="img/wedding-dresses/petra.png" width="331" height="437" alt="Petra"/>
        <div class="description">
            <h3 class="range">Petra</h3>
            <p>The epitome of elegance and sophistication, Petra is a modern-day mermaid satin gown with sweetheart neckline. The extraordinary hand-beaded cap sleeve creates an illusion of decadence and trails into an open beaded back bodice with corsets. To add to the overall look, an embroidered insert accents the chapel length train.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/waistcoats/ivory-waterfall.png" width="109" height="110"   alt="Ivory Waterfall Waistcoat"/>
            <p>Ivory Waterfall Patterned Waiscoat </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/shoes/bridal-mellow.png" width="109" height="84"  alt="Mellow Bridal Shoes" />
            <p>Mellow Bridal Shoes</p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end petra panel-->

     <div class="panel" id="fabiana"> 
   <img src="img/wedding-dresses/fabiana.png" width="331" height="437" alt="Fabiana"/>
        <div class="description">
            <h3 class="range">Fabiana</h3>
            <p>This fabulous lace is overlaid on an elegant fishtail shaped dress. The detail on the lace really makes such a simple dress very glamorous. With the dress comes a fantastic lace detailed short jacket with close fitting sleeves and is enhanced with lace covered button flowing down the arms that match the buttons on the back of the dress.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
         <div class="accessory">
            <img src="img/accessories/waistcoats/ivory-stripe.png" width="109" height="110"  alt="Ivory Stripe Waistcoat"/>
            <p>Ivory Stripe Waistcoat </p>
         </div> <!--end accessory-->
               <div class="accessory">
            <img src="img/accessories/tiara-1.png" width="109" height="84" alt="Tiara" />
            <p>Tiara </p>
         </div>   <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end fabiana panel-->

   <div class="panel" id="fifi"> 
      <img src="img/wedding-dresses/fifi.png" width="331" height="437" alt="Fifi"/>
        <div class="description">
            <h3 class="range">Fifi</h3>
            <p>A stunning plain ivory satin dress with puff ruche skirts that has been detailed with small ivory roses. This gown is enhanced with a coloured sash around the waist for a final finishing touch.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/beatrix.png" width="109" height="110"  alt="Beatrix"/>
            <p>Beatrix Bridesmaid Dress </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/betsy.png" width="109" height="110" alt="Betsy"  />
            <p>Betsy Childs Bridesmaid Dress </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end fifi panel-->

       <div class="panel" id="petal"> 
      <img src="img/wedding-dresses/petal.png" width="331" height="437" alt="Petal"/>
        <div class="description">
            <h3 class="range">Petal</h3>
            <p>The princess line dress gives way to a wonderful puff ruche on the skirt. Tiny embroidered and beaded flowers adorn the dress and makes exquisite detailing. To finish off the overall look are a set of very delicate shoulder edged straps.</p>
     <div class="recommendations">
        <h3>Georgia Recommends</h3>
               <div class="accessory">
            <img src="img/accessories/fabia.png" width="109" height="110"  alt="Fabia"/>
            <p>Fabia Bridesmaid Dress. </p>
         </div>   <!--end accessory-->
         <div class="accessory">
            <img src="img/accessories/tiara-2.png" width="109" height="84"  alt="Tiara"/>
            <p>Tiara </p>
         </div> <!--end accessory-->
    </div><!-- end recommendations-->
       </div><!--end description-->
    </div><!-- end fifi petal-->
    </div><!-- end wedding-dresses-->
</div><!--end gallery-->
</div>
<!-- end right-->
</div><!--end content-->

<div   id="footer">
            <p class="fltlt">            </p>
            <p class="fltrt">
                <a href="http://www.firstimpression.co.uk/websites.php" title="Web design in Glossop">Web design</a> by <a href="http://www.firstimpression.co.uk" title="First Impression Glossop">First Impression</a>            </p>
        </div>  
   </div><!-- end page -->     
    </div>    
</body>
</html>

CSS - только соответствующий материал 

#page-outer{width:816px; height:550px; background: url(../img/page-outer-bg.png) no-repeat; position:relative; background-position:0 10px; padding-top:50px; margin:0 auto;}
#home #page{background:url(../img/page-bg.png) no-repeat; position:relative; background-position:40px 0; width:912px; top:-103px; left:-20px; height:650px;}
#page{background:url(../img/page-bg-2.png) no-repeat; position:relative; background-position:40px 0; width:912px; top:-103px; left:-20px; height:650px;}

#content{height:100%;}

#right{width:600px; margin-left:5px;  float:left; position:relative; top:120px;}
#right p{ color:#808080; font-size:14px; line-height:18px; margin-bottom:10px; padding-left:5px; width:330px; }

#footer{width:750px; height:50px; margin:0 auto; position:relative; padding-top:3px;}
#footer p {color:#808080; font-size:10px;}
#footer p a{color:#808080; font-size:10px;}

#gallery{background:url(../img/gallery-bg3.png) no-repeat; background-position:right; position:relative; margin-top:-30px;}
.panel .nav,  #gallery .nav{ width:50px; height:20px; margin-left:10px;}

div.panel {  padding: 0;  height: 500px;  width: 600px; }
div.panel img{float:left; margin-top:10px; margin-right:5px;}
div.description{float:left; width:255px; margin-top:35px; position:relative;}
#right div.panel div.description p{float:left; width:235px; font-size:11px; line-height:17px; padding-left:0; }

div.description div.recommendations{float:left; width:255px; margin-top:5px; position:relative; top:30px;}
#right div.description div.recommendations h3{margin-top:0;}

#right  div.description div.recommendations .accessory{height:100px; width:240px; margin-bottom:10px;}
#right div.description div.recommendations .accessory p{margin-top:5px; width:125px; height:90px; overflow:visible;}
#right  div.description div.recommendations .accessory img{float:right; margin-top:0;margin-right:3px;}

.nav a#prev{ background:url(../img/accessories/prev.png); text-indent:-9999px; float:left; width:15px; height:15px; margin-right:5px; cursor:pointer;}
 .nav a#next{ background:url(../img/accessories/next.png); text-indent:-9999px;float:left; width:15px; height:15px; margin-right:5px; cursor:pointer;}

div.bride{margin:30px 0 0 0; width:520px;}
div.bride img{float:right; margin-top:-20px;}

Спасибо за любую помощь, это начинает болеть у меня сейчас !!! :(

Дан

Ответы [ 2 ]

5 голосов
/ 01 ноября 2009 
$('#wedding-dresses').cycle({ 
fx:     'fade', 
speed:  'fast', 
timeout: 0, 
next:   '#next', 
prev:   '#prev' ,
}); 
});

Попробуйте пропустить последнюю запятую после "prev: '#prev'. IE не может переносить запятую в объекте.

0 голосов
/ 09 октября 2009

То, как я подошел к этому, было физическим взглядом на макет.

Например, я представил несколько картинок, прикрепленных к длинной доске объявлений под рамкой для фотографий. Рамка изображения будет действовать как верхний DIV, ограничивающий, какую информацию можно увидеть. Плакатная доска была бы более крупной, содержащей DIV, в которую были вложены картинки, каждая из которых содержала бы DIV. На мой взгляд, это был самый простой способ представить себе это устройство.

Теперь, с учетом вышесказанного, я бы предложил, чтобы ваш div для 'стендовой доски' имел ширину, достаточную для размещения всех ваших 'картинок' рядом. И просто убедитесь, что DIV вашей «рамки кадра» переполнен: скрыто;

Если это ничего не прояснит для вас, просто дайте мне знать, и я могу попытаться на самом деле написать код для вас, чтобы показать вам, что я пытаюсь объяснить. Но, надеюсь, это, по крайней мере, даст вам мысленное представление о том, что я предполагаю, что вы пытаетесь достичь.

...