CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
Nova
Nova

Reputation: 423

Images are not showing up in IE 8 or IE 9 for some reason

My site simply displays a main image with an image slider beneath it. The images are not appearing in IE 8 or IE9, but begin showing up in IE10.

The HTML for the gallery is simply:

<div class="fotorama"
     data-nav="thumbs"  
     data-width="100%"
     data-ratio="800/600"
     data-minwidth="350"
     data-maxwidth="700"
     data-minheight="300"
     data-maxheight="100%"
     margin-top= -5%;>
<img src="http://www.pampangahouses.com/wp-content/uploads/2012/08/leighton-front-view.jpg">
<img src="http://www.pampangahouses.com/wp-content/uploads/2012/08/leighton-front-view.jpg">
<img src="http://www.pampangahouses.com/wp-content/uploads/2012/08/leighton-front-view.jpg">
<img src="http://www.pampangahouses.com/wp-content/uploads/2012/08/leighton-front-view.jpg">
<img src="http://www.pampangahouses.com/wp-content/uploads/2012/08/leighton-front-view.jpg">

</div>

Here is a screenshot of the images not displaying in IE8/IE9:

ie8/ie9

and here it is in IE10:

IE10

the css for "fotorama" is here:

http://testsite24.netai.net/public/css/fotorama.css

and js code here:

http://testsite24.netai.net/public/js/fotorama.js

If IE8/9 does not support a necessary function here, can you recommend a fall-back solution for these versions? Thanks so much!

Full demo site: http://testsite24.netai.net/public/demo6.html

Upvotes: 1

Views: 1032

Answers (2)

user488187
user488187

Reputation:

Your display is powered by a fotorama.js script, which has an error in IE8 and IE9 and so fails to work.

This script uses the Javascript console (at least once at line 1296). In IE8 and IE9, the Javascript console is created only if the Developer Tools are active.

EDIT based on comments:

One approach that may work is to create a dummy console if one does not exist natively, for example:

<script>
if (!window.console) {
    window.console = {
        log: function() {}
    };
}
</script>

Now, if someone does a console.log(something), it will not cause an error.

Upvotes: 2

Kevin
Kevin

Reputation: 6014

Using IE11's Dev Tools in IE8 mode, I get an error in popunder.js, which is added to the document by the "Hosting24 Analytics Code":

<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

but the page renders correctly anyway. I don't have easy access to actual IE8 or 9. Are you able to remove that script? Or is it automatically forced in by the hosting company? The issue might be 100% caused by the free hosting. Do you have access to a different server where you can test it? In any case, there's nothing wrong with the HTML you posted*, and it looks like Fotorama tries to support all the browsers that jQuery 1.x supports, so it doesn't seem likely that Fotorama is the issue, though that would be the next place I'd look.

*EDIT: except possibly the "margin-top" as ajp15243 mentioned in the comment above. It's certainly worth removing that to see if the IE8 & 9 problem goes away.

Upvotes: 1

Related Questions