Wed, 2011-08-31 01:22
Hi
I am using a combination of jquery and css to hover over a button and have it expand out to reveal text and then close again when the mouse is moved away. In Firefox it works perfectly but in safari, the button appears 3/4 quarters down in the div. I can put a style top of -568px but would rather use one rule that fits all browsers instead of putting in a rule just for safari. I have tried the position: relative too in the #content-holder ul li and/or #content-holder ul li a style but that hasn't work either. Any suggestions would be most appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript" src="includes/mousewheel/jquery-1.2.1.js"></script> <script type="text/javascript" src="includes/mousewheel/jquery.dimensions.js"></script> <script type="text/javascript" src="includes/mousewheel/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="includes/mousewheel/jScrollHorizontalPane.js"></script> <script type="text/javascript"> $(function() { var originalSizes = new Array(); $('#content-holder').jScrollHorizontalPane({showArrows:false}); $('.scroll-to').bind('click',function(){ $('#content-holder')[0].scrollTo(75); return false; }); }); </script> <script type="text/javascript"> var currheight = document.documentElement.clientHeight; window.onresize = function(){ if(currheight != document.documentElement.clientHeight) { location.replace(location.href); } } </script> <script src="includes/easing/jquery.easing.1.3.js"></script> <script src="includes/easing/jquery.easing.compatibility.js"></script> <script> $(function(){ $("#content-holder ul li a").each(function(){ $(this).hover(function(){ $(this).animate({width: "150px"}, {queue:false, duration:450}); $("#content-holder ul li a.expand").css("background-image","url(images/Text_Expander_off.jpg)"); },function() { $(this).animate({width: "15px"}, {queue:false, duration:450}); $("#content-holder ul li a.expand").css("background-image","url(images/Text_Expander_on.jpg)"); }); }); }); </script> <style> #container { position: relative; margin-left: 0px; margin-top: 8%; overflow: visible; height: 640px; z-index: 1; width: 100%; } .jScrollPaneContainer { position: relative; overflow: hidden; height: 650px; width: 100%; z-index: 1; } .jScrollPaneTrack { position: absolute; cursor: pointer; left: 0; bottom: 0; width: 100%; height: 40px; border-top: 1px dashed #b3b3b3;} .jScrollIntervalTrack { position: absolute; } .jScrollPaneDrag { position: absolute; cursor: pointer; background-image:url(images/move_me.gif); background-repeat: none; height: 40px; width: 80px; border: 0px; top: -12px; background-color:#FFF; } .scroll-pane { width: 100%; float: left; padding: 0; } #content-holder { width: 9660px; height: 600px; } #content-holder ul{ list-style: none; padding: 0px; } #content-holder ul li{ list-style:none; display:inline; white-space: nowrap; padding: 0px; } #content-holder ul li a{ position:relative; display: inline-block!important; overflow: hidden; height: 600px; width: 15px; } #content-holder ul li a p { font-family: Helvetica, sans-serif; font-size: 10px; color: #666666; line-height: 13pt; padding: 20px; } #content-holder ul li a.expand { background-image: url(images/Text_Expander_on.jpg); background-repeat: no-repeat; border: 0px; } </style> </head> <body> <div id="container"> <div class="jScrollPaneContainer"> <div id="content-holder" class="scroll-pane"> <ul> <li><img src="images/brand/098_EagleImage.jpg" width="690" height="600" alt="Eagle" /></li><li><img src="images/brand/109_ChannelDash.jpg" width="690" height="600" alt="ChannelDash" /></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/113_Laccam.jpg" width="690" height="600" alt="Laccam" /></li><li><img src="images/brand/105_Mohini.jpg" width="690" height="600" alt="Mohini" /></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/MurrayLandsSigns.jpg" width="690" height="600" alt="MurrayLandsSigns" /></li><li><img src="images/brand/TarastarLogo_FA_RGB.jpg" width="690" height="600" alt="TarastarLogo_FA_RGB" /></li><li><img src="images/brand/TCM_Logo.jpg" width="690" height="600" alt="TCM_Logo"/></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/WEL_LogoRGB.jpg" width="690" height="600" alt="WEL_LogoRGB" /></li><li><a href="#" title="" class="expand"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum lacinia sollicitudin. Curabitur at quam sem. Donec porta varius erat.</p></a></li><li><img src="images/brand/YesItsFresh_212007_012_RGB.jpg" width="690" height="600" alt="YesItsFresh" /></li> </ul> </div> <div class="jScrollPaneTrack"><div class="jScrollPaneDrag"></div></div></div></div> </body> </html>
