Debugging a website to make it work with IE
April 3, 2012 1:42 PM Subscribe
Advice on making a website work with Internet Explorer.
I've made a website that uses opacity levels and the Raphael JS library. It works without problem on Firefox/Chrome/Safari both on Windows and Mac. However, although the underlying functionality works on Internet Explorer, there are a few things that are not showing up that make it look terrible.
Are there any general strategies that I can use to identify the problems? I wondered if there are any websites out there that will run a compatibility check, or any other approaches that I can use.
I've made a website that uses opacity levels and the Raphael JS library. It works without problem on Firefox/Chrome/Safari both on Windows and Mac. However, although the underlying functionality works on Internet Explorer, there are a few things that are not showing up that make it look terrible.
Are there any general strategies that I can use to identify the problems? I wondered if there are any websites out there that will run a compatibility check, or any other approaches that I can use.
Can you be more specific as to what isn't working? Can you put a link to the site in your profile?
posted by missmagenta at 1:59 PM on April 3, 2012
posted by missmagenta at 1:59 PM on April 3, 2012
Opacity in IE is spotty in older versions and if you're using PNGs then they do not work well at all.
You could try getting around the opacity issues by creating an IE-specific stylesheet and enclosing it in conditional comments. It's more work but if you have to support IE then it's a thing you have to do. (Not everybody makes this choice, some folks are lucky).
posted by fifteen schnitzengruben is my limit at 2:06 PM on April 3, 2012
You could try getting around the opacity issues by creating an IE-specific stylesheet and enclosing it in conditional comments. It's more work but if you have to support IE then it's a thing you have to do. (Not everybody makes this choice, some folks are lucky).
posted by fifteen schnitzengruben is my limit at 2:06 PM on April 3, 2012
There's no such thing as a meaingful compatibility check; you need to load the site in IE yourself and look. Microsoft helpfully makes virtual machine images available for IE testing. The VMs are free and they will work in the free VirtualBox, I have some detailed notes on how to set them up.
Raphaël adds extra complexity if you're drawing graphs, etc; it renders to SVG in most browsers and VML for older versions of IE. Compatibility is good but not great; you should ask the Raphaël community for details. The post above is right that opacity is a specific problem in old versions of IE.
You should pick a version of IE and target it. If you say IE9 only life gets much simpler, it even has decent SVG support. If your users run IE7 or IE8 then you have more work to do. Don't bother with IE6, it is dead and gone.
posted by Nelson at 2:14 PM on April 3, 2012 [2 favorites]
Raphaël adds extra complexity if you're drawing graphs, etc; it renders to SVG in most browsers and VML for older versions of IE. Compatibility is good but not great; you should ask the Raphaël community for details. The post above is right that opacity is a specific problem in old versions of IE.
You should pick a version of IE and target it. If you say IE9 only life gets much simpler, it even has decent SVG support. If your users run IE7 or IE8 then you have more work to do. Don't bother with IE6, it is dead and gone.
posted by Nelson at 2:14 PM on April 3, 2012 [2 favorites]
Best answer: I can't comment on Raphael JS, but I can help you with a typical process of IE bug squashing.
First step is to get IETester, it will let you see what you are doing.
Next, set up a conditional style sheet. Choose which version of IE you want to target with it and go from there. Usually IE 8 or better are close enough to OK that I can address them in my actual style sheet. IE7 or worse will look awful, so I target the bulk of my conditional style sheet at the problems in IE7 and use the *html css hack to target the stragglers that IE6 will have.
If the bulk of your problems are css opacity there are work arounds out there, but I can't remember them off the top of my head, I'd guess it would just be a javascript library you can download and link to. Another approach might be to replace all the css opacity with transparent .pngs. IE 6 and 7 don't play great with transparent pngs by default but they can easily be made to with the ddbelated transparent png fix.
posted by cirrostratus at 2:44 PM on April 3, 2012
First step is to get IETester, it will let you see what you are doing.
Next, set up a conditional style sheet. Choose which version of IE you want to target with it and go from there. Usually IE 8 or better are close enough to OK that I can address them in my actual style sheet. IE7 or worse will look awful, so I target the bulk of my conditional style sheet at the problems in IE7 and use the *html css hack to target the stragglers that IE6 will have.
If the bulk of your problems are css opacity there are work arounds out there, but I can't remember them off the top of my head, I'd guess it would just be a javascript library you can download and link to. Another approach might be to replace all the css opacity with transparent .pngs. IE 6 and 7 don't play great with transparent pngs by default but they can easily be made to with the ddbelated transparent png fix.
posted by cirrostratus at 2:44 PM on April 3, 2012
IE7 and up tends to do better with transparent images, rather than setting opacity in CSS. So, maybe for your conditional Stylesheet you could replace all your opacity calls with images that match the opacity you're after.
posted by backwards guitar at 6:29 PM on April 3, 2012
posted by backwards guitar at 6:29 PM on April 3, 2012
Use a reset style sheet to reduce cross-browser differences due to browsers' default CSS settings.
posted by kirkaracha at 8:16 AM on April 4, 2012
posted by kirkaracha at 8:16 AM on April 4, 2012
IETester hasn't always been accurate or reliable for me, so I recommend using virtual machines.
posted by kirkaracha at 8:23 AM on April 4, 2012
posted by kirkaracha at 8:23 AM on April 4, 2012
This thread is closed to new comments.
Here is the bug tracker for Raphael JS, you might look through to see if any of the issues match the problems you're seeing. Another good approach might be to look through all of the Raphael JS example/demo pages with various browsers and see if any of them show problems; if they do it might give you clues as to which specific features you've used that don't work cross-browser.
posted by XMLicious at 1:52 PM on April 3, 2012