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.
posted by a womble is an active kind of sloth to Computers & Internet (10 answers total) 5 users marked this as a favorite
Which version of IE are you trying to get it working on? The last several versions are radically different from each other especially in regards to things like SVG support.

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

Best answer: IETester.
posted by lobbyist at 1:57 PM on April 3, 2012 [1 favorite]

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

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

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]

Try feature detection using the Modernizr Library.
posted by xtine at 2:40 PM on April 3, 2012

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

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

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

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

« Older Infinite Malady Dog   |   I'd like to get back into drawing and looking for... Newer »
This thread is closed to new comments.