PNG Image Links Broken in IE8

Question

I've been working on a website locally, creating the web page using Dreamweaver and the latest version of Bootstrap (v 2.3.2). I've been testing it in different browsers and the images seem to load correctly in all of the other browsers (Chrome, Firefox, and Safari). When I go into Internet Explorer 8, some of the PNG files I created load correctly while others don't load at all.

Here is how it looks in Chrome:

Here is how it looks in IE8:

I read through many solutions. The first here, where I went into the Developer tool and did an image report. In the report, as seen below, shows it can read the ALT tags but can't seem to read or think the image link is broken:

Knowing this, I tried finding a more in-dept solution, including this post. Thinking it could possibly be the way the picture was created, I tried multiple ways of creating the images (including changing the format of the file to RGB 8-bit in Photoshop and copying/pasting the vector images from Illustrator to Photoshop) and then removing the browser cache every time I would modify the images and restart the browser. None of it seems to work!

I was wondering if there was something else I could possibly try?

The code I'm currently inserting these images are through the HTML:

<div class="span4">

                <div id="applicationInfo">
                        <p>Application #:<br />
                        PI: <br />
                        Status: <br />
                        Disposition:
                        </p>
                  </div>

            <ul>
                <li><a href="#">PI / CoPI Information</a><img src="images/incomplete.png" /></li>
                <li><a href="#">Project Information</a></li>
                <li><a href="#">Funding Information</a></li>
                <li><a href="#">Proposal Summary</a><img src="images/complete.png" /></li>
                <li><a href="#">Proposal Narrative</a></li>
                <li class="current"><a href="#">Current Research Summary</a><img src="images/complete.png" /></li>
                <li><a href="#">Budget</a></li>
                <li><a href="#">Publications List</a></li>
                <li><a href="#">Supplemental Information</a></li>
                <li><a href="#">Save <span class="small">(without submitting)</span></a></li>
                <li><a href="#">Submit</a></li>
            </ul>
         </div>

Answer 1

This post helped a lot! What helped was making sure to have the images saved as RGB 8-bit or 16-bit. I usually have it defaulted at 16-bit to give more color.

Best of luck to anyone looking for this answer!