Using responsive caroufredsel, it works like a charm in Chrome and Firefox, but in Safari it suddenly creates 800px top and bottom margins, discarding everything.
Its a responsive site, and, oddly enough, the problem does not arise if under the influence of a media query for screens with a width of 500 pixels or less.
The site is a custom Wordpress build that expects on the server so that the domain is mapped when everything is ready to go.
live page:
http:
does the static version of html work fine, is it a Wordpress problem or the fact that it is not using a real domain yet?
jquery to run the caruffredod below:
jQuery(document).ready(function() { jQuery("#guitars-gallery").carouFredSel({ auto: false, circular: false, prev: '#prev', next: '#next', responsive : true, height : 500, scroll: 1, items : { width : 370, height : 500, visible : { min : 1, max : 3 } } }); }); function doSomething() { jQuery('#guitars-gallery').trigger('destroy', true); jQuery('#guitars-gallery').css({'text-align': '','float': '','position': '','top': '','right': '','bottom': '','left': '','width': '90%','height': '','margin': '1% auto'}); jQuery("#guitars-gallery").carouFredSel({ auto: false, circular: false, prev: '#prev', next: '#next', responsive : true, height : 500, scroll: 1, items : { width : 370, height : 500, visible : { min : 1, max : 3 } } }); }; var resizeTimer; jQuery(window).resize(function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(doSomething, 100); });
Any ideas are welcome, it drives me crazy!
UPDATE: I have resolved this now, using jquery to change the style after calling the carousel:
jQuery('.caroufredsel_wrapper').css({'margin-top': '0px', 'margin-bottom': '0px'});
Fixes the problem, but I'm still no wiser why this happens :-)