IE8 (Big) problem

JavaScript
1

I have just published my new page after checking it with all browsers, mainly via the IE11 Emulation facility. It worked fine with all IEs from IE8

Now I’ve just come across a small mini computer with IE8 and the page does not display AT ALL except for the header, footer and some txt all over the place.

Could you have a look if you have an IE8 around and tell me if it is the code or the computer that I tried?

If it is the code, I hope there is a way round thiis

Thank you

EDIT

In fact, all the various blovks are there but spread out horizontally, so that in order to see them all I have to use the slider at the bottom to go from one side to the other with the width being at least 3 times what it shouls be, I start by seeing the header and navbar where they should be , but to see the rotatot I have to move sudeways well past the end of the header to eventually find the rotator which works fine, then I have to carry one sideays to get to the sidebar!

What have I done wrong?

NEW EDIT

This page is a close copy of earlier pages I did last week, and all the other work fine in IE8. So, there must be some problem with this. Maybe IE8 does not like image sliders,

Could I do a conditional comment to override the slider, if that is what’s causing the problem?

A BIT MORE

This page has the same skeleton as e.g. http://pintotours.net/Pinto/article5.html which works fine in IE8, The only unusual thing is the image slider with all its scripts…

FOUND SOMETHING

On a test page I deleted all the scripts connected to the slider and the page displays normally in IE8 except that the slider no longer slides and the images stack one at a time.

So, the problem is witht the slider. This is what I took out of the page, and will start putting back one at a time to see who is the culprit…

<script type="text/javascript" src="/Pinto/Slick/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="/Pinto/Slick/slick/slick.min.js"></script>

<script type="text/javascript" src="/Pinto/Slick/slick/slick.js"></script>

<script type="text/javascript">
$('.single-item').slick({
  dots:true,
  arrows:true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
 

});
 </script>

LATER

It works with the first 3 scripts in place but NOT with the last:

<script type="text/javascript">
$('.single-item').slick({
  dots:true,
  arrows:true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
 

});
 </script>

What can I do? Can I do a conditional comment that will stop the script for IE8? But then I would also need to eliminate all but one of the images for IE8…

Load a different page for IE8?

Help!!!

PS - Maybe to do with version of JsQuery? I uploaded version jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc.

I don’t know if this helps:

https://github.com/kenwheeler/slick

2

I may be wrong but I doubt very much that you want both:

<script type="text/javascript" src="/Pinto/Slick/slick/slick.min.js"></script>

and

<script type="text/javascript" src="/Pinto/Slick/slick/slick.js"></script>

although whether it accounts for what isn’t working I don’t know.

3

Hi gandalf458

I took one of them out and still the same. I also uploaded jquery-1.7.min.js to the server and asjusted the test page accordingly but no good.

I know nothing about scripts and wonder if you could ahve a look at https://github.com/kenwheeler/slick/blob/66a9ee8f01a0d8e56f959b17ce70ed1a27ebfdee/slick/slick.min.js

It seems to be for fixing a bug in IE8

4

Hi qim. slick.min.js is simply a minimised version of slick.js - that’s why you don’t need both! They are basically the same thing, just that the minimised version takes up less space. The comment about fixing IE8 anchor issue is simply referring to the latest update to the script, made in July.

5

I don’t speak JavaScript, qim, but it seems like you would not need that comma after 3000 (the last variable). Try removing that comma and see if it makes a difference. Just a guess.

6

Hi ronpat

Thanks for coming in. I took it out and it makes no difference.

Did you see that github page: Maybe it is the solution, but it’s all Chinese to me.

7

LATEST

The github file appears to be a newer version of the slick.js script (Ver 1.5.8 as against 1.5.7)

However it DOES NOT work even with the other modern browsers. I tried to run it with both JQuery 1.7 ans 1-.11.3 and the slider does not work. I end up with a stack of 10 images one on top of the next.

It seems crazy that a new version does not fix the IE8 bug which it was supposed to do, and makes it useless for all other browsers.

There is one explanation though: I am not doin things properly!

I have a test page on http://pintotours.net/TEMP/TEST/

and it does not work on nay browser, although it now looks the same on all including IE8

8
Off Topic:

I’ve moved this to the JavaScript forum, as it doesn’t seem to be an HTML/CSS question.

9

I’m not sure what jquery-migrate is but the instructions say to use the following:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Perhaps it would be a good idea to create a new page with only the basic Slick elements and see if that works, and once it is then add it to your page.

10

Hi gandalf458

Thanks

I’ll try that next.

I’ve written a new page just for IE8 but am stucj now on how to serve it with a conditional. Can you serve both css and html?

11

Hi gandalf458

I’m afraid it did not work.

Thank you for researching, anyway. Much appreciated!

12

Hi qim. I’m sorry it’s not working for you. I have tried a very simple page myself with Slick and although it works on Firefox after a fashion, it doesn’t work properly in any version of IE I have tried. I have thrown a page together so I may have missed things. But it does look as though there are some problems…

13

For me it works very well in all brorowsers including IE11. It does not work in IE8 and I would like some feed-back regarding IE9 and IE10, as I don’t have those browsers here.

I tried the Emulation and they weer ok, but than so was IE8

Anyone around with IE9 and 10, please let me know if the page displays ok

many thanks

14

qim, I can attest that the slider works in IE8. However, there seems to be a problem with the framing of the page in IE8. Perhaps that particular JS is interfering with the display:table/table-cell elements in IE8. I don’t know. IE8 should have no problem with the display:table properties.

With all of the JSs turned ON normally, if you open your test page in IE8 and disable the display:table/table-cell properties in #wrapper, #main and #side, the slider appears working on the page and all elements appear; except that #side is below #main.
If you then float #main and #side, they will appear side-by-side.

15

Hi ronpat

Thank you very much for having taken the trouble with this one. I have just got up and looks like I am going to have a busy day!

Before I start can you tell me which html are you referring to? The one that’s now my front page http://pintotours.net/ and that displays the page totally broken up sideways in IE8; or one of my test pages http://pintotours.net/TEMP/TEST/index2.html
in which I isolated the scripts. This one still works fine in modern browsers /I have not tested IE9 and 10) and in IE8 is ok other than for the sidebar that is being pushed down. I think you are talking about this one, right?

Thanks

16

The URL from post #7 is the one I was testing:
http://pintotours.net/TEMP/TEST/

however, the results are the same here:

17

Thanks

I’ll start right away on this one.

18

I’ve disabled the table with display:inline in a conditional

display:[quote=“ronpat, post:14, topic:208077”]
If you then float #main and #side, they will appear side-by-side.
[/quote]

How do I do that? float:left, float:right or float:none ?

19

I wasn’t offering that as a solution, just describing a step that I took while testing.

To “float” something, you assign float:left or float:right to that object in the CSS. In this case, after commenting out the display:table properties.

Let me repeat that IE8 should not have a problem with the display:table properties. The problem is elsewhere… probably in the jQuery.

20

Hi ronpat

Yes! If I take out the last script the page loads properly in IE8, without of course the image slider

I changed the code by adding a conditional

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

 #wrapper{

display: inline;
}

#main{
	display: inline;
float:left;

}

#side{
	display: inline;
float:right;
}
<![endif]-->

But nothing has changed. The page opens with just header, navbar and footer in place. You can see the beginning of the text that spreads as if the width of the screen were 3 times what it is. You have to use the slider at the bottom to move the page sideways to see the slider and all the adverts in the middle, and then move again all the way to the right to get the sidebar.

Let me know if I did not follow your instructions properly.

Otherwise, if you look at http://pintotours.net/TEMP/TEST/index2.html I managed to disable the scripts for IE8 and display instead a single image (no slider). if we can’t get the page to work properly in IE8 maybe this is a temporary alternative. The problem is that I have a problem left with the sidebar that is being pushed down for some reason I cannot understand.