jQuery Mobile css clash

Page: 1

Author Post
Registered: Dec 2009
Posts: 39
Hi Byron - I'm about to add mobile compatibility to my sites, all of which use floatbox. I'm experimenting with jQuery Mobile - everything is working fine with floatbox except for, what I think is, some kind of css clash.

Here is a basic jQuery Mobile page in which I've placed your current fbcycler demo (the floatbox files are all as downloaded a couple of days ago), so no modifications or tweaks of any sort ;)


I've tested this page on a Samsung Galaxy S6 with Mobile Chrome and on my desktop with Chrome and IE11. In all cases there appears to be some sort of "corruption" in the bottom right navigation graphics area, and on the mobile the magnifier graphic is similarly "corrupted". These are the screenshots:-



If I comment out the link to jQuery Mobile css, floatbox looks as I'd expect.

Have you seen this before? Do you have any ideas as to how this might be fixed?
« Last edit by springknees on Sun Nov 01, 2015 7:27 pm. »
Registered: Aug 2008
Posts: 3382
It looks like line #951 in jquery.mobile-1.4.5.css is assigning a text-shadow to those floatbox controls. Could you please try adding "text-shadow:none;" to the first line of floatbox.css (version 6.1.0) and let me know how it goes. You'll need to update floatbox.css.gz too if you're serving that, and you'll probably need to flush your browser cache for testing.
Registered: Dec 2009
Posts: 39
What fantastic service - on a Sunday too!

Added the extra property as suggested - all now looks good. Many thanks, it would probably taken me months (if ever) to find that.

BTW - while doing my initial testing I spotted what I think is a minor typo in the fbcycler demo page. You have....

<div class="fbCycler floatbox""
data-fb-options="cyclePauseOnHover:true cycleZoom:0 cycleFadeTime:2 group:utah caption:href"

...with an extra quote after floatbox.

Page: 1