Mootools Slider not working in Chrome

[Jo]

Hello,

I have a problem with a Mootools Slider which does not seem to appear in Chrome.  The bottom portion of the DIV simply does not appear in the web page.  Firefox and other browsers seem to appear and slides when the top bar is double clicked.  Here is the sample code on jsfiddle:

http://jsfiddle.net/superkingjo1/bQpjV/

Based on what I've seen in Firebug, a Slider adds a DIV which wraps a target div and it is styled with overflow:hidden.  This attribute seems to affect the behavior in Chrome.  I've tried various options in Slider but none of them seems to work.  Does anyone know a workaround for this issue in Chrome?

Thanks for your help,
Jo

[Paul Saukas]

I think the trouble you are having is more with the CSS and placement of the lower div. I do not have the time to dig out the CSS problem, but I can say your lower div should be outside the main div . Quick example of a simple slide.  http://jsfiddle.net/Arasoi/JX8CT/ 

if you're still having trouble after I am set free of the office I will take a closer look for you. :) 

--Paul

[Jo]

Hi Paul,

Is it possible to tweak CSS without having to change the DOM structure?  This only happens in Chrome and I don't see issues in other browsers.

Jo

2012年9月7日金曜日 11時32分48秒 UTC-7 Paul Saukas:

[Jo]

I managed to find a workaround by adding an empty div with a fixed height, which I'm not fond of doing it.  But why does Chrome need this extra block element to prevent unexpected floating?

http://jsfiddle.net/superkingjo1/bQpjV/4/


2012年9月7日金曜日 11時09分02秒 UTC-7 Jo:

[Jo]

Actually, removing the "float:left" from line 3 did the trick.  No need for this empty div insert.  I guess float acts differently in Chrome.

2012年9月14日金曜日 13時41分41秒 UTC-7 Jo: