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

Question

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

Related? http://stackoverflow.com/questions/1204288/jpeg-shows-in-firefox-but-not-ie8 — epascarello, Feb 18 '15 at 17:55
Why are you setting `margin-top= -5%;` as an attribute? That's a CSS rule, and not a valid HTML attribute. It either needs to live inside a CSS file (linked into your HTML page) as `.fotorama { margin-top: -5%; }`, or in an inline `style` attribute on the `div` as `style="margin-top: -5%;"`. IE is notorious for doing strange things when it encounters strange markup. Also ensure you have ` ` as the very first thing in your HTML. — ajp15243, Feb 18 '15 at 18:43
Thanks I removed margin-top altogether, and ensured was at the top. The result hasn't changed, IE8/9 still won't show the photos here: http://jasoncampbell.net46.net/details2.html — Nova, Feb 18 '15 at 23:02

score 2 · Accepted Answer · 2015-02-19T00:59:51.647

2

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.

edited Feb 19 '15 at 00:59

answered Feb 18 '15 at 20:14

so could one make the exception go away with a "polyfill" hack? if (!window.console) { window.console = {log: function(){};}} ...etc? – Kevin Feb 18 '15 at 20:54
It's certainly worth a try. It would take care of the case where Developer Tools are not there. – Feb 18 '15 at 20:56
Thanks bob but I have no clue how to fix the problem. kcrumley above mentioned a polyfill hack but I'd love some guidance/tips to fix this issue! A total novice and feeling a little overwhelmed. Thank you – Nova Feb 18 '15 at 23:04
Added to the answer based on @kcrumley's suggestion. – Feb 19 '15 at 00:43
@Nova, you'd want to add that script near the top, before the fotorama.js script is loaded. It might not be strictly necessary, if the error was happening inside a function that's called long after the script was initially loaded, but it can't hurt. That said, I wouldn't be shocked if some browser threw a security exception because the script appears to be "hacking" by "overwriting" (only if it's not there) an important built-in object; this is not my area of expertise, and security models have changed over time. – Kevin Feb 19 '15 at 00:54
1

It works! Thank you SO much to both bobdye and kcrumley for your mutual, fantastic support. Very much appreciated guys, take care. – Nova Feb 19 '15 at 17:24

Kevin · Answer 2 · 2015-02-18T18:49:53.553

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.

Thanks for the tip, I managed to set this up on a paid hosting account to test, and I'm still not seeing any images appear in IE8/9. Granted, I'm only using virtualization software to view them in IE 8/9, so perhaps on a real browser it would work? Either way, appreciate further input! — Nova, Feb 18 '15 at 23:23

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

2 Answers2