Home Slideshow formatting incorrectly in Internet Explorer
Support Area › Forums › Responsive Visual › Home Slideshow formatting incorrectly in Internet Explorer
Tagged: Formatting, home, Internet Explorer, issues, slideshow
- This topic has 11 replies, 2 voices, and was last updated 11 years, 1 month ago by Bill Robbins.
-
AuthorPosts
-
March 5, 2013 at 01:34 #9860Thomas CarrollParticipant
The slideshow on my homepage http://www.shotxshot.com.au works perfectly fine on every internet application (Safari, Firefox, Chrome, etc) all except for all version of Internet Explorer.
The images in my slideshow just seem to file downwards in IE, rather than become a slideshow.
I want the slideshow to look how it does on Firefox or Chrome.
This is really frustrating because it seems no one is having this issue anywhere, and finding a fix is incredibly difficult. And it’s warding off customers who find me through IE.
I’ve tried turning off plug-ins, re uploading the slideshow images individually….so it leaves me to think it must have something to do with the CSS code in the home slideshow section.
Can you please help me fix this. Maybe you can send my the correct CSS code for the home slideshow section of Responsive Visual? I have no idea what to do about it.
Thanking you in advance,
Thomas.March 5, 2013 at 09:23 #9863Bill RobbinsModeratorThomas,
Sorry for the trouble and that is most unusual. I’m pasting the slider CSS below so you can use it if you need to. I also noticed that you’re running an older version of WordPress. I’d recommend updating to 3.5.1 which is the current version. It includes an updated version of jQuery which might just fix the problem since it looks like a javascript issue to me.
Also in looking at your source code it looks like the portfolio plugin is loading a script that’s bundled with theme too. That could also be the problem. Here’s how to take it out of the theme:
- Go to the Appearance section and select Edit.
- From the list of files on your right, choose scripts.php and look for this line near the top:
wp_enqueue_script('masonry');
- Delete it and save your changes.
- Next choose custom-js.php and look for this section:
// Masonry jQuery(function(){ var $jcontainer = jQuery('.lower-sidebar'); $jcontainer.imagesLoaded( function(){ $jcontainer.masonry({ columnWidth: 320, itemSelector: '.widget' }); }); var $jcontainer = jQuery('ul.podcast-list'); $jcontainer.imagesLoaded( function(){ $jcontainer.masonry({ columnWidth: 480, itemSelector: 'li.podcast' }); }); });
and delete it.
- Save your changes.
That will remove the script from the theme for you. See if that doesn’t help out. If you still have trouble, let me know.
Thanks,
BillHere’s the slideshow CSS:
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { max-width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } .no-js .slides > li:first-child { display: block; } .flexslider { background: #000; position: relative; zoom: 1; } .flexslider .slides { zoom: 1; } .flexslider .slides > li { position: relative; } .flex-container { zoom: 1; position: relative; } /* Direction Nav */ .flex-direction-nav a { width: 23px; height: 30px; margin: 0; display: block; background: url(images/slider-arrows.png) no-repeat 0 0; position: absolute; bottom: 10px; cursor: pointer; text-indent: -9999px; -webkit-transition: all .3s ease; } .flex-direction-nav .flex-next { background-position: 100% 0; left: 30px; } .flex-direction-nav .flex-prev { left: 10px; } .flexslider:hover .flex-next { opacity: 0.8; } .flexslider:hover .flex-prev { opacity: 0.8; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .disabled { opacity: .3!important; filter:alpha(opacity=30); cursor: default; } /* Control Nav */ .flex-control-nav { display: none; }
March 5, 2013 at 16:58 #9880Thomas CarrollParticipantHi Bill, thanks for your reply and for your help and time.
I’ve replaced the slideshow code with your CSS and it didn’t make any change to how my slideshow looks on IE.
The removal of
wp_enqueue_script(‘masonry’);
and
// Masonry
jQuery(function(){
var $jcontainer = jQuery(‘.lower-sidebar’);
$jcontainer.imagesLoaded( function(){
$jcontainer.masonry({
columnWidth: 320,
itemSelector: ‘.widget’
});
});var $jcontainer = jQuery(‘ul.podcast-list’);
$jcontainer.imagesLoaded( function(){
$jcontainer.masonry({
columnWidth: 480,
itemSelector: ‘li.podcast’
});
});
});Didn’t make any difference.
I also still had the same issue with my slideshow on WordPress 3.5.1 and made the choice to downgrade so I could be able to upload images onto my site.
3.5.1 won’t allow anyone to upload images it seems. But that’s another topic for another thread.I was wondering if you could send me a copy of the home-slideshow.php
as I think I might have deleted something vital in there during my edits one time?Cheers.
Thomas
March 5, 2013 at 18:26 #9881Bill RobbinsModeratorThomas,
Sorry I missed this earlier. The Facebook snippet that’s in the header file. Move it down below the
tag in the header.php file.Internet Explorer is very finicky about having anything before the document declaration and it often won’t run javascript if that’s the case.
I gave your source code a quick test with that moved in IE 8 and it brought back your slideshow.
Here’s the code from the home-slideshow.php file:
If you have any trouble, let me know,
BillMarch 5, 2013 at 18:49 #9883Thomas CarrollParticipantHi Bill,
What does the Facebook snippet look like in the header.php file? I’m trying to find what you are talking about.
Thanks,
Thomas
March 5, 2013 at 18:53 #9885Bill RobbinsModeratorThomas,
Here’s the Facebook code:
and it looks like it has been inserted at the very top of the header.php file.
March 5, 2013 at 18:58 #9886Thomas CarrollParticipantBill,
Sorry Bill it doesn’t seem to be in the header.php section at all. Am I looking for it in the right place?
Tom
March 5, 2013 at 20:59 #9890Bill RobbinsModeratorTom,
It could be inserted either by a plugin or it could also be in your functions.php file (or some file attached to it). You could try turning off all your plugins and seeing if it’s still there. If it is, then the code has been added to the theme. If it’s not still there, then turn the plugins on, one by one until you find the one that’s adding it.
If it has been added to the theme and you don’t see it in the functions.php file, why don’t you email me a copy of it to support@organizedthemes.com? I’d be happy to look through it right quick and see if I can locate where it’s been added.
Bill
March 5, 2013 at 23:06 #9898Thomas CarrollParticipantI’ve found it in body-tag.php
What shall I do with it?
March 6, 2013 at 09:30 #9911Bill RobbinsModeratorI would delete it. Here’s what the original file looked like:
March 6, 2013 at 17:23 #9924Thomas CarrollParticipantThank you Bill, my website now works properly on IE.
I just had to delete that bit of code.
Thank you very much for your time and help 🙂
Thomas.
March 6, 2013 at 19:58 #9927Bill RobbinsModeratorThat’s great to hear. If you have any other trouble, let me know.
Bill
-
AuthorPosts
- The topic ‘Home Slideshow formatting incorrectly in Internet Explorer’ is closed to new replies.