0

6 of my images (png and animted gif on hover) fail to load on IE8 only, I've tested on most browsers on mac and windows and IE8 is the only one where the images don't load. They actually appear on IE7, I've been checking the web for solutions or similar problems but I can't seem to find the right solution.

Here's the link to that page: http://tinyurl.com/8ydbp6y

heres the html of that specific section

    <ul class="about-icons">
         <li id="about-love"><a href="includes/content/content-love.html" target="content-load"><img src="images/about/icon-thankyou.png" onmouseover="this.src='images/about/icon-thankyou.gif'" onmouseout="this.src='images/about/icon-thankyou.png'"/></a></li>
          <li id="about-japan"><a href="includes/content/content-japan.html" target="content-load"><img src="images/about/icon-japan.png" onmouseover="this.src='images/about/icon-japan.gif'" onmouseout="this.src='images/about/icon-japan.png'"/></a></li>
       <li  id="about-icecream" class="no-margin-right"><a href="includes/content/content-icecream.html" target="content-load"><img src="images/about/icon-icecream.png" onmouseover="this.src='images/about/icon-icecream.gif'" onmouseout="this.src='images/about/icon-icecream.png'"/></a></li>
    </ul> 
    <br/>  
    <div id="about-whymochiko" ><img src="images/about/whymochiko.png" alt="Why Mochiko"/></div>
    <br/>
    <ul class="about-icons">
       <li id="about-flavors"><a href="includes/content/content-flavors.html" target="content-load"><img src="images/about/icon-flavors.png" onmouseover="this.src='images/about/icon-flavors.gif'" onmouseout="this.src='images/about/icon-flavors.png'"/></a></li>
       <li id="about-ingredients"><a href="includes/content/content-ingredients.html" target="content-load"><img src="images/about/icon-ingredients.png" onmouseover="this.src='images/about/icon-ingredients.gif'" onmouseout="this.src='images/about/icon-ingredients.png'"/></a></li>
       <li id="about-milk" class="no-margin-right"><a href="includes/content/content-milk.html" target="content-load"><img src="images/about/icon-milk.png" onmouseover="this.src='images/about/icon-milk.gif'" onmouseout="this.src='images/about/icon-milk.png'"/></a></li>
    </ul>`

Thanks in advance!

edit I checked IE8 image reports and apparently it adjust the width and height of my images to 0px. I have no idea why that happened :| and I have no idea how to fix it

Libre
  • 1
  • 1

1 Answers1

2

I think this might be a bug in IE with JavaScript. A possible solution would be to have the image loaded then toggle the animations visibility using JavaScript instead?

Neojames
  • 155
  • 8
  • Thanks! But unfortunately it's not a javascript bug :( I tried what you recommended and the images are still missing. I checked the developers tools (image reports) and apparently IE8 automatically re-adjusts my height and width to 0px from their original dimensions. I'm not sure why it happened on IE8 in particular – Libre Jul 10 '12 at 16:47
  • Ah! Try setting IE8 on quirks mode. – Neojames Jul 10 '12 at 17:11
  • Thanks :) the images finally load but they're all over the place haha. It would seem that putting !important on all the css declarations related to those six on a separate css file works, not sure why it didn't work when I added !important on the main css file though – Libre Jul 10 '12 at 17:42
  • :D Glad you found a solution! I think IE8 must be thinking it knows better and overriding you for some reason... – Neojames Jul 10 '12 at 18:02