Home Slideshow formatting incorrectly in Internet Explorer

[Thomas Carroll]

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.

[Bill Robbins]

Thomas,

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:

1. Go to the Appearance section and select Edit.
2. From the list of files on your right, choose scripts.php and look for this line near the top:

   
   wp_enqueue_script('masonry');
   

3. Delete it and save your changes.
4. 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.

5. 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,
Bill

Here’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;
}

[Thomas Carroll]

Hi 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

[Bill Robbins]

Thomas,

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,
Bill

[Thomas Carroll]

Hi 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

[Bill Robbins]

Thomas,

Here’s the Facebook code:

and it looks like it has been inserted at the very top of the header.php file.

[Thomas Carroll]

Bill,

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

[Bill Robbins]

Tom,

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

[Thomas Carroll]

I’ve found it in body-tag.php

What shall I do with it?

[Bill Robbins]

I would delete it. Here’s what the original file looked like:

[Thomas Carroll]

Thank 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.

[Bill Robbins]

That’s great to hear. If you have any other trouble, let me know.

Bill

[Author]

Posts