Old story, PNG and IE can’t be in the same place

For many(most?) web designers, the limited of IE is always set a certain limit to their works. You put a drop soft light shadow behind a box in your design, but then you have to remove it later ‘cos it’s not gonna work in IE6. You put a glowing light effect on the border of the box and try to make fade in and fade out, it definitely won’t work in IE6 and in IE7 it will appear with a black ugly border around your box (filter will mess up your image in IE7). That’s not what you want.

You’re not the only one

Now if you’re designing website and you have this problem. Don’t worry as many other websites have this too. Coda website has a great design, creative effects, unfortunately it won’t look so good in IE7. I guess Coda targets Mac users so they can’t be asked to fix the problems. But we’re not that’s lucky. So how we fix it.

After a few hours finding a way to fix it, if you could find a way which is great. I couldn’t unfortunately. If you’re like me and you’re thinking about designing your website again and leave all your super cool effects then don’t.

Put the best up

It’s maybe not fair (and not right)to treat your visitors different. However, you also want to show your visitors from Firefox the best of your design. You have to choose what to do. I myself prefer to show the best I could do for my website.

It’s really depend from the percentage of your visitors. Keep tracking your website with Google Analytics. If your website’s about software, programming, IT…, you may have a higher chance to have more users using Firefox. Then why not show them what you really have in mind when you design your website.

Basically, if visitors use Firefox, you could just keep it normal. But if they use IE, you will need to switch the picture to a more compatible one. Like I did with my side navigator. If you switch between IE and FF you will see the one in IE will have dark grey border and the one in FF is a glowing blue line.

It’s just so simple to get this thing done if you use JQuery.

//Change image if IE
if($.browser.msie) {
$(".CatTip").attr("class","CatTipIeHack CatTip");
}

using jQuery, you could check what browser your visitors use. Then you could add or change CSS class with simple jQuery command.

IE isn’t work with PNG24 only, if you use an PNG8, it still working alright. No shadow or glowing could be used though. You could also used a gif file but it won’t give you a smooth border.

Thank to @Skeetio’s notice, $.browser is deprecated in jQuery 1.3. You still could use that, however with the new function $.support give a better result. To get the same result as the code above, you could use this code in jQuery 1.3. $.support.opcaity will return true or false:

//Change image if IE
if(!$.support.opcaity) {
$(".CatTip").attr("class","CatTipIeHack CatTip");
}

What if without jQuery, without Javascript

If you don’t use jQuery, you could check out the article in quirksmode.org – browser detect.

Make sure you keep your more compatible version of your image as a default. So even without javascript, it still show a decent look in every browser.

Conclusion

So what will you choose? You want to change your design, a less fancy way or you want to make a special case for IE users. In most website, number of IE user and FF is 50:50. For a website about IT.., the percentage of Firefox could be higher (mine is 70% for FF, 11% for IE). If you have the same percentage, why don’t you give visitors the best you could do for your website.