Dojo Internet Explorer 6 png problem - javascript

Everything works fine in all browsers excluding Internet Explorer 6. png images shows white background behind them. How to get rid of them in Dojo. I am using dojo version 1.5.

IE6 doesn't support PNG transparency properly. It has several known bugs.
There are hacks to get around it - try IEPNGFix, but there are several other variants of the hack available.

Did you try add alfa filter on it? Like this:
style="background:url('/upload/contents/371/dish-main2.png ');
background: expression('none');
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/upload/contents/371/dish-main2.png, sizingMethod=crop);
Can help you with IE6.

Related

Is Chrome Frame really the only choice for improving Raphael performance in IE?

I'm using Raphael 2.1 to draw 15 lines at the same time. Each lines is made up of 50 2 pixel paths. Performance is best in Safari and Chrome, good in FF, weak in Opera, and chokes in IE9. Microsoft says that SVG will run in IE9, but Raphael.svg returns false in IE9.
I've been reading posts related Raphael and IE all day, and the only solution that I've seen for improving Raphael's performance in IE9 is to install Chrome Frame.
Has anyone encountered any other solutions?
Raphael uses svg in IE9 and work with reasonable performance. You have to be careful that IE is not being forced into IE8 standards mode (which frequently happens). If IE9 falls back to IE8 standards then it will end up using VML, which is very slow, and there is no efficient alternative to SVG in general in IE8 or below.
When faced with this problem using IE8 I ended up using divs and css to achieve rendering of lines, rectangles and text. Since that's all I required it was very fast even in IE8, helped out by buffering the divs inside the container. If your problem is simple enough, you may wish to consider a pure DOM solution. See: https://github.com/Matt-Esch/simpleCanvas.js for inspiration.

JavaScript sigma.js graph not displaying in Internet Explorer 8

I'm using sigma.js javascript library to display graphs and it works all fine in all browsers except for Internet Explorer 8 on Windows. Anyone knows what the problem may be? Maybe z-index on the div layer I use or something like that?
Here's the website: http://textexture.com
And here's the library: http://sigmajs.org
Thanks!
PS If anyone has Internet Explorer 9 I'd appreciate if you could tell me if the graph displays on there as well.
The library says it supports browsers that have canvas. IE8 does not support canvas support. IE9 does.
You can see if adding excanvas will make it work.

Graphics made by Raphael Javascript in Internet Explorer 8 (IE) have no color. They do in FF and Chrome

I'm using Raphael javascript library to make graphics.
I've almost copied the Analytics example from the webpage and I'm getting a white and black color graphic in internet explore and I don't know why.
Please see this is how it works on Firefox, Chrome and Safari:
http://imageshack.us/photo/my-images/861/75172783.png/
And this in InternetExplorer:
http://imageshack.us/photo/my-images/847/94131171.png/
Thanks!
Thanks for the Help.
However, I managed to fix the problem. I don't know why VML didn't like that Raphael object was inside a div with a "-".
This was my structure:
Simply taking the graphic outside the on-data div worked. Very weird actually!
Thanks!
From my answer to another Raphael/IE related problem:
Have you tried using Raphael 2.0? I think it's still in beta stage, but I found that it's got improved VML capabilities.
Also be sure to test browser behavior with an uncompressed version of Raphael, as minified versions seem to have bugs. Instead, I've used Packer by Dean Edwards, which gave me a compressed and bug free version of the lib.

Internet Explorer unwanted artifact on images when using javascript slideshow

We're having the following weird (well...) behavior in all versions of Internet Explorer browsers when using javascript slideshows.
You can see what I mean here http://www.tospirto.net/index.php?ID=photo_gallery&Rec_ID=481
In the last 3 images there are white lines and artifacts created by the browser.
This is true as I said for all versions of Internet Explorer.
Have you seen this before??
Do you ave any idea what is causing this???
Thank you
I can see the artifacts - strange! This is a known issue in IE's JPEG rendering algorithm. If you enlarge the pictures in Photoshop, you will see that the artifacts are restricted within encoding blocks. (Pardon me, but I assume you know roughly how JPEG is encoded.)
Try encoding the images with a different quality, or even in a different format (like PNG, even though that would give you larger files). You can find other thoughs on how to solve this here:
http://forum.jquery.com/topic/ie-dead-pixels-when-fading-images
It's a bug in the alpha filter, which is how transparent fades are implemented in IE (before version 9, which finally supports proper CSS opacity). When used directly on an image, any pixel with the RGB values 2,5,10 (aka #02050A) is treated as transparent.
This is how 1-bit transparency from eg. GIF is implemented in the alpha filter. Evidently Microsoft think this particular colour is so seldom used no-one will notice. Oops.
Avoid the bug by putting the alpha filter (or fade script that uses it) on a container <div> instead of on the image itself.
Alternatively, you can use an AlphaImageLoader filter (same hack as for transparent PNG loading on IE6) to load the image, or just get rid of the alpha filter when you're not in the middle of a fade (you still see the bug during fade but at least it doesn't appear at 100%).
OK I found what was wrong after some searching.
The effect is called swiss army image artifacts and you can find more about it here: http://www.dynamicdrive.com/forums/showthread.php?t=34462
Another great bug from explorers :)
The solution is on the referenced article which is to remove absolute blacks using the levels tool on the photoshop for example. Did a batch change using actions in photoshop for all pictures and works like a charm.

Is there a way to get border-radius and gradient backgrounds in IE?

I am wondering if there is any work-arounds using javascript or whatever to get IE to show border-radius or gradient background?
I came across this by looking for fixes to using 'gradients and border-radius' in IE9. And yes while its true you can now use both in IE9, you sadly cannot use them together.
The issue is documented in a a few places:
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
IE9 border-radius and background gradient bleeding
The issue seems to be related to border-radius not playing nice with IE's old filter gradients. Sadly the release of IE9 did not bring proper CSS gradients.
jquery for at least the radius / corners item.
For gradient backgrounds see this.
You don't need to use jQuery for rounded corners, there are solutions that will make browsers behave well even in the event of javascript being disabled.
Check out http://css3pie.com/, provides a pretty simple solution (htc file) for making this work. As monn indicated IE9 gradient and radius don't work together. Css3Pie is intended to let you dev with css3 markup but provides backups for IE back to IE6.
There's also css3please and compass (for ruby).
This issue has recently been discussed in the HTML5 Boilderplate issue queue (HTML5 Boilerplate is a well-vetted collaboration to bring together the best techniques in modern web markup as a starting point for any platform).
https://github.com/paulirish/html5-boilerplate/issues#issue/354
Here's a demo of the problem & solution:
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
This is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js
Just include the script last in your head tag and it should handle the rest. See readme notes

Categories

Resources