MAJOR UPDATE:
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.
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
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.
Related
I've got a bit of an issue with SVG files now. I'm trying to make the logo on my site set to an SVG, and now that it's live, my friends can see it (mobile browsers, safari) but I'm on Iridium (Chrome) and don't see it. I've tried Chrome on mobile, I've tried Brave (which I believe is also based on Chrome) and neither have worked. IE and Firefox (Quantum) do display the file with no issues, but only part of it displays on any chrome-based browser.
Here's a screenshot of what I see on chrome:
https://i.gyazo.com/8912785d57756c5cda09c941f4fa3542.png
Here's a screenshot of what I should see (Firefox):
https://i.gyazo.com/57272d67a4406243f6ea1aeeb89d7138.png
Some extra details.
-The text part is an image, and so is the girl. The rectangle that does show in Chrome is an actual rectangle. Like, it was the shape path when exported from Photoshop.
-When I open the image in chrome (just the image, not embedded on the site) it shows up fine. I can play with dimensions, do whatever and everything works perfectly.
-The SVG size is all 100% everywhere, and the parent div is the size I need it to be, so that's not the problem. I'm not that new to embedding SVGs I use a number of them on the site as well.
-There's no error in the browser console, not that I'm sure it would make one either way.
EDIT: Included code:
https://hastebin.com/fugodijiwa.xml
There is a gray border showing around the dropdown image, as seen above. That shouldn't be there. I've seen several other questions which state that this is the case because the src of the image cannot be found or loaded. However, that's not the case here. The element contains a src tag which is set to a 16x16 blank GIF.
The file '/images/system/blank.gif' exists, and can be loaded by Safari. Also shows up fine in the Network panel, as 200 - OK.
However, and here is the reason of the bug I guess... In the elements panel the image shows up as:
I can load this image fine in Safari, opening it in a new tab shows as 16x16 GIF... No idea what's going on here.
Just FYI, this is Safari only. Chrome does not show the gray border around the image.
Note: Changing to a transparent PNG image solves the issue, but I'd like to know the underlying cause.
Tracked down the issue to... uBlock!
uBlock decided that an image in the form of /images/system/blank.gif?v=12345 was an ad and decided to cancel the request. The joy.
Using image sprites, not a problem, being doing it for years. But I've just noticed that they have stopped working on chrome when using an "img" tag with a "src" referencing a 1x1px transparent gif (spacer).
I use this spacer/method so that I still have alt text available for screen readers, etc. Just using a div or span tag is not really an option, I need to use the image tag.
Example CSS for the sprite:
.rec_working_backpacker{background: url("../img/recommended/working-sprite.jpg") 0 0; width:100px; height:75px;}
Example implementation of the html:
<img class="rec_working_backpacker" alt="some alt text" src="<?php echo imagePath();?>d.gif"/>
I know this is all working fine (nothing wrong with paths, etc) as it's working on all other browser, but in Chrome nothing is being displayed, it's like it is seeing the 1x1px "d.gif" and using that as the image, but taking the width/height of the sprite from the CSS (using the chrome inspector). Also using the inspector in chrome I can see that it's got the sprite image, it's loaded, it's just being superseded by the 1x1px gif.
Sample live URL: goo.gl/1c9nIF
Top of the RHS column the "print" icon is missing
Just above the google map the "Other interesting pages - what will you look at next" box is full of empty images
Footer is meant to have 4 "follow us" round social icons
etc
Driving me nuts, I've got empty css sprite slots all over my live site... not what I wanted to see on a Saturday morning :-(
Anyone know anything about this? I've checked on three different computers, cleared caches, etc, seems like chrome is broken...
The problem seems to be your image. I'm not sure why, but when I replace your image src with https://pingviin.org/images/flags/blank.gif it works as expected. Maybe whatever you used to create the gif put some strange meta tags on it?
In my office everyone is using IE9. On most of the computers the CSS renders correctly. I have text floating to the left and right. On others, the text does not float or acts odd being positioned below other text. The resolution is the same along with the browser version. Ontop of this, the border color doesnt apply correctly too. On one its white, on the rest it has the grey I was expecting to see. Is there a security setting I'm missing that could stop most of the CSS from working and let the rest work?
Use CTRL-F5 to do a cache clear refresh. You might still be seeing some users previous downloads of reference files.
I just downloaded the IE8 full release so I could test a site I just created.
[Example Deleted]
Focus on the left sidebar background image. It is suppose to be a 1x1 semi-transparent .png image that repeats. IE8 renders it as a gradient!!! It get's even wonkier when you try to scroll your window or mouse-over the sidebar.
I had already tested this site in the normal browsers (IE7, Firefox, and Chrome). It looks exactly as I designed it in these. IE8 is FUBARed though. I tried to set IE8 to "IE7" mode but it still looks crappy. IE 8 in IE7 mode obviously isn't rendering the same way as the real IE7. Not even the "IE7 meta tag" works.
Has anyone else had problems like this? I thought IE8 was supposed to be a an improvement, not a step backwards.
P.S. Please excuse the crappy markup on this page. I used IE's "save entire page" feature.
It may be a rendering error in IE8, or perhaps it's some function to smooth the edges of repeated images that gives you an unexpected result. Either way it's not very surprising that you get problems using such a small image. Do you realize that the browser has to draw the image 190152 times to render the page?
I am using a 10x10 semi transparent png as background for a div in a page, and it renders just fine in IE8.
I fixed the bug and it isn't the gamma issue that is mentioned in that other post. My issue was being caused by the fact that the image is 1x1 pixel in size. I just changed it to 1x2 and it fixed the problem. Weird
[edit] Just saw Guffa's post after i asked this. See his for answer.
I had a similar issue with a site I'm building. The issue only occurred on 50% of the machines with ie8 it was tested on, I was building it for an IT firm so had access to lots of computers. We were able to "fix" the problem by toggling Hardware Acceleration on the problem machines, not that thats really a fix at all.
Thanks for the help on this issue -- what a weird bug.
I was also experiencing the issue on 50% of the computers running IE8 (had access to quite a few machines). When I had a 1x1px semi-transparent png set as a background image on a div with CSS, IE would render this as a funky vertical, transparent gradient.
Changing the source image to a 5x5px png of the same opacity fixed the bug... go IE!
The problem was my original png was
1×1, and for whatever reason IE8 was
not liking trying to tile that and
handle the alpha transparency at the
same time. When I accidentally saved
that image with a much larger copy I
had on my clipboard, 100×100, it ended
up fixing whatever problem Internet
Explorer was having with processing
the png’s transparency.
Source