Tutorial :IE6 Red Cross and Border around image



I have a PNG fix working on the site. When I remove the PNG fix the red cross and border disapear. What's odd is that the problem only seems to do it with this particular image. There are other Alpha Blended PNG's on the same page that render fine.

The image is not broken (you can see it) nor is it a link. But IE6 and 7 both put a box around it and a red cross on it. It also strips the styling.

alt text http://i44.tinypic.com/287pzf8.png

UPDATE: The image is NOT a background image, and the image is definitely not broken. You can actually see the image, works fine in Safari, Firefox, Chrome and Opera.

It's a plain old regular image tag

<div class='container'>      <img src='../images/leader_concierge.png' class='page_leader'  width="917" height="257" />  </div>  

here's the css

.page_leader { margin: 10px 0; }  

and here's the exact same thing in safari

alt text http://i39.tinypic.com/257zptf.png


You are missing the replacement gif.

All PNG fix methods require that a transparent gif be available to replace the png image, it's part of how the substitution works. If that gif is missing, then you get this broken image appearance even tho the PNG draws fine.

In the case of iepngfix.htc, it expects the file to be at /images/spacer.gif


In firefox with the Web Developer Toolbar you can view broken images. In firefox the image would still be broken but you wont see anything like IE6 and IE7 show.


Note, that in xhtml (well, you closed the img tag) you should use " instead of '.


If you are using iepngfix.htc you need to open it up and set the blank image path. The image needs to be a 1x1 .gif.

Looks like I was just barely beaten to the punch.


Yes, I had the same problem, and it was also with iepngfix.htc which allows transparency in IE6.

Yes, the required accompanying gif image was on the images folder, as instructed.

So I went into the htc file and entered the exact link and now everything works perfectly!


Firefox and 'the other browsers' handle broken images more elegantly, but the image almost certainly is broken - they just aren't rendering it. Perhaps try to get in the habit of regularly checking your site logs for 404s, as it's not always obvious that you have a broken image in a contemporary browser.

Edit: Given your recent discovery, perhaps open the pngs in question in something like TweakPng - you may find that there are chunks causing this behaviour that you can safely remove. Compare the effected pngs with pngs that work properly and remove the offending chunks.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »