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
<!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 – only the relevant stuff
#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;}
Thank you for any help, this is starting to hurt my head now!!! 🙁
Dan
Try dropping out the last comma after “prev: ‘#prev’.
IE can’t stand the trailing comma in an object.