1. • CommentAuthorn!ck
   • CommentTimeSep 3rd 2010 edited

    permalink

   Hello,

   I am using monoslideshow v 2.16 as a full size background on a web page.

   The controls work fine in opera 9 and IE8 and IE7 but not in firefox 3 or chrome 5 or safari 3.2 (on PC) - they are on screen but you can't click them for some reason.

   XML contents:
   <?xml version="1.0" encoding="utf-8"?>
   <album itemPath="/equity/images/bg/" thumbnailPath="/equity/images/bg/thumbs">
   <configuration scaleMode="scaleToFill" backgroundImage="/equity/images/mix/blank.gif" position="center" randomize="true">
   <caption>
   <title/>
   <description/>
   <shadow/>
   <transition/>
   </caption>
   <navigation backgroundAlpha="0.6" backgroundColor="#ffffff" backgroundOverlayAlpha="0.3" backgroundOverlayColor="#ffffff" backgroundRoundness="10" margin="20,20,20,20" padding="20,16,20,16" position="bottomLeft" strokeColor="#ffffff" strokeWidth="0" >
   <albums>
   <caption type="none" >
   <title/>
   <description/>
   </caption>
   <shadow/>
   <transition>
   <shadow/>
   </transition>
   </albums>
   <items height="75" horizontalSpacing="9" imageBackgroundAlpha="1" imageBackgroundColor="#ffffff" imageRoundness="0" imageScaleMode="scaleToFit" rows="1" strokeColor="#ffffff" strokeType="square" verticalSpacing="9" width="100" >
   <shadow alpha="0.3" />
   <transition>
   <shadow alpha="0.8" sizeX="4" sizeY="4" strength="1" />
   </transition>
   </items>
   <shadow alpha="0.7" />
   <caption type="none" >
   <title/>
   <description/>
   </caption>
   <pageIndicator colorActive="#a6a8aa" margin="15,10,15,0" size="10" spacing="7" />
   </navigation>
   <reflection/>
   <controller backgroundAlpha="0.9" backgroundColor="#ffffff" backgroundRoundness="10" iconColorDisable="#dfe1e4" iconColorDown="#a6a8aa" iconColorOver="#3b3c36" iconColorUp="#a6a8aa" margin="11,0,11,20" position="bottomRight" appearTime="2" startHidden="false" strokeColor="#ffffff" strokeWidth="0" >
   <transition direction="leftToRight" />
   <scrubBar progressColor="#3b3c36" />
   <shadow/>
   </controller>
   <mark>
   <shadow/>
   </mark>
   <progress backgroundColor="#3b3c36" position="center" strokeColor="#ffffff" >
   <shadow alpha="0.8" />
   </progress>
   <transition kenBurnsMode="randomZoomIn" kenBurnsStrength="0.11" kenBurnsTime="8" />
   <shadow/>
   <sound/>
   <thumbnailNavigation>
   <items>
   <shadow/>
   <transition>
   <shadow/>
   </transition>
   </items>
   <shadow/>
   </thumbnailNavigation>
   </configuration>
   <contents>
   <image source="demo-bg01.jpg" />
   <image source="demo-bg02.jpg" />
   <image source="demo-bg03.jpg" />
   </contents>
   </album>

   Any ideas?

   Thanks in advance.

   Nick

2. •  
     CommentAuthorchristophvl
   • CommentTimeSep 3rd 2010

    permalink

   I can confirm the problem.
   Must be some kind of stacking problem. Try putting the code calling monoslideshow (your "gigantic" div) at the end of the body.
   Christoph

   Thankful People: n!ck
3. • CommentAuthorn!ck
   • CommentTimeSep 4th 2010

    permalink

   Thanks for that.

   You're right - it was a stacking problem - I had a transparent wrapper div over the top of the slideshow as 100% width and 100% height - changing the height to auto fixed it and now the controls work in all browsers.

   Thanks for your help.

© 2009 Monokai, all rights reserved. Buy Monoslideshow.