PNG Image Links Broken in IE8 - image

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

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!

Related

logo image does not show on mobile device browser

I have made a website, where the logo looks ok when I open it in my laptop browser. However, it doesn't show up in my iPhone or iPad browser. I tried Safari, Chrome, Brave, the same...
this the code in my html file:
<div class="header-logo logo animated" data-animate="fadeInDown" data-delay=".6">
<a href="./" class="logo-link">
<img class="logo-dark" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
<img class="logo-light" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
</a>
</div>
I have found another stackoverflow questions, the answer says it's because the image size, but I don't think so. My original size is only 1310x242 pixel. and I also tried to reduce the size to only 300x56. It still doesn't show.
Your help is highly appreciated!
okay, I sorted out myself.
It's the srcset, obviously it defines the set of images we will allow the browser to choose between, and what size each image is. So I forgot to update it to the image that I want in srcset.

Adblock Plus for Chrome blocking links in H3 but not H2 - Any way around that?

I have a site where Adblock Plus for Chrome is blocking links in H3 but not H2 elements. It seems strange I could just change them to H2 and it would work. But I have a lot of sites that have this potential issue. Is there a way way around that issue?
Why would H3 be an ad threat but not H2?
Here is some test code of this in action:
<div id="topCenterBlock">
<h3>A test headline </h3>
<div class="source">Stack Overflow</div>
<br>
<div class="source"> 2:30 P.M. ET </div>
<p>Test view of a extract from the article that would display under a link</p>
</div>
They would only be the default from install. I only installed the product so I could see the behavior, which one of our users complained about. I can get a snap later to show but it's just the set out of the box.

My pictures won't load in articles in joomla Version 1.5.26

I have added a picture to my webpage here http://www.backpacks4aussiekids.com.au/Home.html and it works just fine, but when I tried the same thing in an article here http://www.backpacks4aussiekids.com.au/Articles/what-is-needed.html the pix won't load, even though I followed the same proceedure.
I even tried changing the pix from .jpg to .png and back again. The only way the changes can be viewed is if I clear my site and browser cache before I attempt to view the site.
All the text is able to be viewed but there are either empty boxes where the pix should be or nothing at all.
thanks in advance, des
The image definitely exists as I have checked.
The reason why it's not showing is because the picture on the homepage is within an <img> tag where as the picture on the second link you provided is for some reason within an <input> tag as shown below:
<input type="image" style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="">
Open the article in the article manager, click on the little html button which will open a window, find the code above and change to the following:
<img style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="" />
Hope this helps

gif and png Images disappear on IE8 only

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"><img src="images/about/icon-thankyou.png" onmouseover="this.src='images/about/icon-thankyou.gif'" onmouseout="this.src='images/about/icon-thankyou.png'"/></li>
<li id="about-japan"><img src="images/about/icon-japan.png" onmouseover="this.src='images/about/icon-japan.gif'" onmouseout="this.src='images/about/icon-japan.png'"/></li>
<li id="about-icecream" class="no-margin-right"><img src="images/about/icon-icecream.png" onmouseover="this.src='images/about/icon-icecream.gif'" onmouseout="this.src='images/about/icon-icecream.png'"/></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"><img src="images/about/icon-flavors.png" onmouseover="this.src='images/about/icon-flavors.gif'" onmouseout="this.src='images/about/icon-flavors.png'"/></li>
<li id="about-ingredients"><img src="images/about/icon-ingredients.png" onmouseover="this.src='images/about/icon-ingredients.gif'" onmouseout="this.src='images/about/icon-ingredients.png'"/></li>
<li id="about-milk" class="no-margin-right"><img src="images/about/icon-milk.png" onmouseover="this.src='images/about/icon-milk.gif'" onmouseout="this.src='images/about/icon-milk.png'"/></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
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?

Saving a complex watermark on image

I'm not sure if this is even possible.
I have an image within a div.
<div id="image">
<img src="mine.jpg" />
</div>
And I have another div with text, that is placed on top of the image (well, more precisely, on the div that contains an image).
<div id="image">
<img src="mine.jpg" />
<div id="watermark">Hello</div>
</div>
Now, is it possible to save this as an image? (hm, it sounds a bit ridiculous even while I'm typing this question out!).
It sounds more like "how do I take a screenshot of user's browser".
Even if above is impossible, is there even a remotely relevant approach to this?
No, such a thing is not possible. The best way to do this is to compose the image using serverside code. Like PHP.
I think with html5 you can make such thins with the canvas but thats far away from a everyday use, at the moment.

Resources