I have faced next strange behavior in Firefox when use ico file as src in img tag.
When It opens in Firefox (latest version), it has 16x16 format despite of the fact that ico original format is 128x128.
In other browser (Chrome, IE) everything works great.
Just open elephant-128x128.ico in Chrome and Firefox and you will see the difference.
<img height='128' src="http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico">
https://jsfiddle.net/qwx2sxzg/1/
or
http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico
Does anybody has idea how to fix this?
Your best bet is to convert ico files to another format, since it is not compatible with all browsers.
Image Format Support For Web Browsers
There is no other workaround for it.
Related
Loading image with data uri as source doesnt work in safari.
I am using the following source value see: http://jsfiddle.net/VnnhS/
<img src='data...'/>
everything is working with chrome IE and FF.
could it be size limitation?
It isn't normal because here says that Safari supports it, so I don't know what is your problem, can you send a screenshot?
I am having a strange issue with displaying JPG image on browser. The image color is mostly washed out while being viewed on any browser (Chrome, IE and FF). But it's fine when using desktop applications (Windows Photo Viewer, Paint, etc.) to view.
You can see the example here: https://dl.dropboxusercontent.com/u/2095747/asp.jpg
Does anyone know any particular reason for it?
Regards,
Harry
The image uses a type of embedded color correction that browsers do not support.
Since you seem to have used Photoshop to generate that image, you should reopen your source file and re-export the image using the "Save for web" action, which will either not embed a color profile at all, or use a browser compatible format.
I am trying to embed a pdf in a web page. I am using the following code:
<object data='pdf/main.pdf#nameddest=fun&view=FitH'
type='application/pdf'
width='740'
height='800'>
This works in chrome(apart from FitH doesn't work) and firefox and ie for me. However, when viewing on a mac it doesn't work with named destinations(just loads to the top of the pdf if Safari). Also, it doesn't seem to work in Firefox as firefox seems to have disabled adobe plugin by default. Is there a better way to embed a pdf with relative ease and wide compatability?
The best approach at the moment is to use PDF.js You can check out the demo here : Demo for pdf.js and download the source from here
It is by mozilla and very widely supported / used.
I had a solution to show both .MP4 and .WMV embedded in the browser. It worked fine in both IE and Chrome, but for some time ago it stopped working in Chrome. Chrome will not show any files (mp4 or wmv), but it works fine in IE. I googled it, and found several reasons to why Chromes newer version couldn't deal with this, but no solution to my problem.
The solution that worked was <object><embed>, but this only works in IE now. Then I tried to add the <video> tag and got it to work with mp4 in Chrome, but not with wmv.
So, is it anyone that have a solution to embed a wmv file that will run without problems in Chrome?
The requirements is that it should be able to play both MP4 and WMV files in Chrome and IE.
The long and short of it is that there is no solution. The <video> tag is supported by almost all browsers now, but there are different levels of support for different formats:
MP4 - Good support (noone uses Opera anyway). Works with both the browsers you mentioned.
WebM - Patchy support, definitely none on IE for the time being
WMV - I can't even find anyone giving a hard answer on this one, but I think the general concensus is that <video> is the way to go, and that to use one of the two above formats is the way to go. MP4 seems the better choice for the time being. If there are requirements to say that you must achieve the impossible/pointless, I'd suggest that your requirements-setters familiarise themselves with ffmpeg :)
Google chrome doesn't seem to bother to display an <img> with cross origin src attribute.
Firefox does. So for Firefox one would need to use an iframe which works fine for .png images. But it turns out that Firefox doesn't handle well iframes with an .ico src attribute: Firefox simply doesn't seem to create the appropriate elements in the iframe.
So the question is: is it possible to display a cross origin .ico image in Firefox?
Thanks!
<img>'s src doesn't have a cross origin policy by default. That's why you can link your images from almost everywhere (almost, because you can set your host not to allow hotlinking -maybe that's what appears here-).
Anyway, please, try to avoid the use of .ico in a <img> tag because it won't be shown in every browser as #Pekka said. Some will anyway because many software save .ico file as .png (kinda like a camouflage) but it still a trick...
The iframe trick won't work either.
In summary, use .ico only if you need to but avoid it if you want a nice compatibility with every browser.
google chrome doesn't seem to bother to display an with cross origin src attriubte.
that is definitely incorrect. Your problem probably doesn't have to do with the image's origin, but with the format. ICO is mainly a Windows format and will not be reliably displayed across browsers.
The Wikipedia browser comparison on image formats doesn't list ICO at all.