Remove the comma at the end of this line: prev: '#prev' ,
trailing commas at the end of an array are not allowed in IE 6/7. Also, next time please post a link instead of all your markup if possible. Cheers! Mike On Oct 9, 4:45 am, First Impression <dancollin...@googlemail.com> wrote: > Hi, > > I am currently developing a site for a client which uses the JQuery > cycle plugin to move through a number of divs which contain pictures > and info about wedding dresses. > > All works fine in Firefox, but when I test in IE6 + IE7 the divs are > all stacked on top of each other vertically and they soan right down > the screen for 1000's of pixels. > > To me it seems like this is a problem with absolute/relative > positioning or the z-index, I have also used a few floats in the child > divs. > I am also using SIFR for text replacement, could this be conflicting? > > Here is my code, can anyone see a problem that would cause my cycle > not to work in IE.? > > -------------- > XHTML > -------------- > <code> > > <!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> > > </code> > > -------------- > CSS - only the relevant stuff > -------------- > <code> > > #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;} > > </code> > > Thank you for any help, this is starting to hurt my head now!!! :( > > Dan
