I hate Internet Explorer – I really do.

As a web designer there is nothing more annoying that designing the perfect site, writing the perfect, standards compliant code only to find IE looks like garbage in Internet Explorer 6 and , to a lesser but still painful extent, 7.

But, as a good web developer ignoring IE entirely is not an option. Especially when IE6 and 7 combined still command something in the order of 75% of the market (if not more) so we deal with the problems as best we can.

One of these such areas is the PNG transparency support in Internet Explore 6 – more specifically, the lack there of.

Over at Net Tuts they have a great Videocast featuring 5 techniques on how to fix the transparency issues in Internet Explorer 6. The cover the following techniques:

Unit PNG Fix

DD_BelatedPNG Fix

IE7.js Fix

Twin Helix Fix (from Angus Turnbull)

Don’t Fix It! (Seriously)

These solutions have there pros and cons and I’ll leave it up to you to choose. Click here to check out the screen cast!

LOVEPIXEL

This just has to been seen to believe! It’s like “Where’s Wally” for pixel art!

There is no artist name that I can find, so if you know who’s made this amazing artwork, please comment so I can post the artists name.

WARNING: Will take quite a while to load, on dial-up? Don’t bother – 25 x 2000px x 2000x PNG’s

If you are anything like me, and most of the Web Design industry, you’ve run into CSS bugs that in IE that just don’t make any sense. You’re building the perfect site with W3C valid CSS and XHTML1, you test it in Firefox, Opera, Netscape and even Safari beta for Windows only to find that IE6 just makes a total mess of your hard work.

According to these the stats at W3 Schools IE6 still controls 36.9% of the market (IE6 and 7 combined have 57%) so unfortunately ignoring the issue is just not an option.

We all know about CSS hacks, tips and tricks but this can make your CSS files really messy. Also you might find that you are using the same techniques over and over again on different sites.

One way that I’ve found to create reusable CSS code is to use Conditional Comments. I’ve had a number of people ask me about them so i thought i would write a introduction to them.

Conditional Comments are only available in the Windows version of Internet Explorer from version 5 onwards. The conditional comments are wrapped in the html comment tag ( <!– –>) which means that all other browsers treat the content within these tags as normal comments and ignore what’s within. GREAT!

You can include CSS files within the comments, javascript, images and – most importantly – a link to Firefox ;)

One of the best features of Conditional Comments is that you can target individual version of IE (5.0, 5.5, 6.0 and 7). You can also specify multiple version.

Here is a run down of the available syntax:

<!--[if IE]&gt;This is Internet Explorer<[endif]-->
 
<!--[if IE 5]>This is Internet Explorer 5<[endif]-->
 
<!--[if IE 5.0]>This is Internet Explorer 5.0<[endif]-->
 
<!--[if IE 5.5].This is Internet Explorer 5.5<[endif]-->
 
<!--[if IE 6]>This is Internet Explorer 6<[endif]-->
 
<!--[if IE 7]>This is Internet Explorer 7<[endif]-->
 
<!--[if gte IE 5]>This is Internet Explorer 5 and up<[endif]-->
 
<!--[if lt IE 6]>This is Internet Explorer lower than 6<[endif]-->
 
<!--[if lte IE 5.5]>This is Internet Explorer lower or equal to 5.5<[endif]-->
 
<!--[if gt IE 6]>This is Internet Explorer greater than <[endif]-->

Nothing really tricky here, the if statement is self explanatory. Begin with an if statement (if x=true then) and end with endif.

There are two special syntaxes used here.

• gt: Grater than
• lt: Less than
• gte: Greater than or Equal to
• lte: Less than or Equal to

Example of this used in xhtml
PNG Javascript fix

<!--[if lt IE 7.]><script defer="defer" type="text/javascript" src="includes/pngfix.js"></script><[endif]-->

Loading multiple CSS files

<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" /><[endif]-->
<!--[if lte IE 5.5]><link href="css/ie55.css" rel="stylesheet" type="text/css" /><[endif]-->

Hope that helps. I now have reusable CSS files that I use in any sites that require them (hostly all). Makes life easier and a good place to bunch all those workarounds (CSS hacks?!) into one easily accessible place.

Have fun

(and please comment.. no one comments on my Blog! :))

http://homepage.ntlworld.com/bobosola/

The above site is all about a JavaScript-based PNG fix for Internet Explorer 5.5 and Internet Explorer 6 on Windows. The fix allows IE to properly render PNG alpha transparency.