I could really use some help with this one because I'm totally stuck for a solution. I've been trying to find something but haven't managed to determine a cause or a workaround. It looks like some kind of clipping bug in Opera 9, but if it is then it seems odd that it doesn't manifest itself in Opera 8. I thought that maybe it had something to do with using opacity effects, because opera 8 lacks those, but turning off all the opacity effects in the CSS didn't solve it.
On Aug 8, 7:54 am, Gordon <[EMAIL PROTECTED]> wrote: > Nobody got any ideas why this is happening? It seems pretty obvious > an Opera bug of some kind rather than any particular problem with > jQuery itself, but it is nonetheless very annoying. Has anyone else > encountered a problem like this or know how to work around it? > > On Aug 7, 6:10 pm, Gordon <[EMAIL PROTECTED]> wrote: > > > I want to have a horizontal scrolling list of products so that a user > > can compare them side by side. I produced something that works, but > > discovered an extremely disconcerting problem that occured in Opera > > 9.x. Here is a simplified test case: > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ > > TR/xhtml11/DTD/xhtml11.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > > <title>Grid Demo</title> > > <!--[if ie]><script type="text/javascript" src="/js/firebug/ > > firebug.js"></script><![endif]--> > > <script type="text/javascript" src="/js/jquery/jquery.js"></script> > > <script type="text/javascript" src="/js/jquery/interface/ > > interface.js"></script> > > <script type="text/javascript"> > > > $(document).ready (function () > > { > > var scrollStrip = $('#compScrollStrip'); > > $('#scrollLeft').click (function () > > { > > scrollStrip.animate ({left: parseInt (scrollStrip.css > > ('left'), 10) > > - 401}, 'slow'); > > }); > > $('#scrollRight').click (function () > > { > > scrollStrip.animate ({left: parseInt (scrollStrip.css > > ('left'), 10) > > + 401}, 'slow'); > > }); > > > }); > > > </script> > > <style type="text/css"> > > <!-- > > /* General */ > > body { > > font: 12px Arial, Helvetica, sans-serif; > > margin: 0px; > > padding: 10px; > > background: #F9F9F9;} > > > h3 { > > font-size: 1em;} > > > /* Dialog boxes */ > > .dialog { > > position: absolute; > > z-index: 1005; > > top: 50%; > > left: 50%; > > background-color: #FFFFFF; > > border-bottom: solid 1px #9CB5CE; > > border-left: solid 1px #9CB5CE; > > border-right: solid 1px #9CB5CE; > > opacity: 0.95; > > filter: alpha (opacity=95);} > > > .dialog h3 { > > color: #FFFFFF; > > text-align: left; > > background-color: #9CB5CE; > > margin: 0 0 1px 0; > > padding: 1px 1px 1px 5px;} > > > /* Comparitor dialog */ > > #comparitor { > > width: 90%; > > height: 400px; > > top: 50%; > > left: 50%; > > margin-top: -200px; > > margin-left: -45%;} > > > .scrollBut, #compContent { > > height: 94%; > > margin: 2px;} > > > .scrollBut { > > width: 4%; > > border: solid 1px black;} > > > #compContent { > > width: 90%; > > position: absolute; > > left: 50%; > > margin-left: -45%; > > border: solid 1px black;} > > > #scrollLeft { > > float: left;} > > > #scrollRight { > > float: right;} > > > #compContent .product, #compContent .productKey { > > background: #CCCCCC; > > margin: 0;} > > > #compContent .productKey { > > width: 25%; > > height: 100%; > > z-index: 20; > > background: #0099CC;} > > > #compScroller { > > width: 75%; > > height: 100%; > > position: absolute; > > top: 0; > > left: 25%; > > overflow: hidden; > > white-space: nowrap; > > margin: 0; > > padding: 0; > > z-index: 10;} > > > #compScrollStrip { > > position: absolute; > > list-style: none; > > height: 100%; > > width: 4010px; > > top: 0; > > border: none 0px; > > margin: 0; > > padding: 0; > > background:#00CC99;} > > > #compScroller .product, #compScrollStrip .product { > > float: left; > > height: 90%; > > width: 400px; > > border-left: solid 1px black; > > margin: 0; > > padding: 0;} > > > --> > > </style> > > </head> > > <body> > > <div class="dialog" id="comparitor"> > > <h3>Compare Prducts</h3> > > <button class="scrollBut" id="scrollLeft"></button> > > <div id="compContent"> > > <div class="productKey">Chart key</div> > > <div id="compScroller"> > > <ol id="compScrollStrip" style="left: 0px;"> > > <li class="product">Item 1</li> > > <li class="product">Item 2</li> > > <li class="product">Item 3</li> > > <li class="product">Item 4</li> > > <li class="product">Item 5</li> > > <li class="product">Item 6</li> > > <li class="product">Item 7</li> > > <li class="product">Item 8</li> > > <li class="product">Item 9</li> > > <li class="product">Item 10</li> > > </ol> > > </div> > > </div> > > <button class="scrollBut" id="scrollRight"></button> > > </div> > > </body> > > </html> > > > When performing the scroll in Opera 9, the top part of each li remains > > where it is! The rest of the element scrolls though, as you can tell > > by their borders moving across the display. > > > The bug doesn't seem to appear in opera 8.x
