Internet Explorer is not my friend

You probably didn't notice if you are a good internet user, and by this I mean, if you are not using internet explorer, but it is not possible to access the content of this website using internet explorer, 6 or even 7. And there is a very simple reason for this: not only it is obsolete (especially version 6, that is now 8 years old...) but it is simply not working properly. So this is what you see with IE (not working 100% yet, but getting there):

The only thing that you can view is simple home page asking you to download a decent web browser, like Firefox, Safari, or Chrome. Why would I choose to do that ? Because I do care about internet, I do care about web standards, and IE makes me produce code that does not make sense.

I can take an example for people who don't understand what I mean when I say 'web standards' or 'clean code'. Few weeks ago I was working for a client, building his website after designing it (i was doing this at RCS with a team, not on my own), and all was working well until we start what is called the 'debugging time'. When we build a website, our concern is that the website is viewed correctly by all users. We view it using firefox, but we have to make sure that other people using Safari, Flock, Opera or Internet Explorer view the same exact thing. This is how the website looks on Firefox:

And this is how it looked like when we first checked with Internet Explorer (6 or 7, was about the same):

Why is this happening ? Because to create the design for html pages, we use a language called CSS. The problem is, Internet Explorer does not understand CSS like it should, and therefore, we have to create a lot of code only to make Internet Explorer display the website properly. It is very frustrating when you first encounter these problems, but with time, this is something you learn how to fix. And this is my main point. I had to spend HOURS of my life trying to make IE work, because this happends on absolutelly ALL the websites EVERYONE build. One day, Internet Explorer will not be used anymore (this is my deepest hope), and all that knowledge will be then useless. I would have spent a huge amount of time learning it for nothing, and this is not my personnal idea of acomplishment.

As of November 2008, there is still 20% of internet users using internet explorer 6, and a total of more than 46% using either internet explorer 6 or 7. It is going down, but I don't think that we can still tell a client: "sorry, we are not going to make your website, that you paid a lot of money for, work for more that 46% of users. Blame Microsoft."

You might also think that I'm a bit lazy not to simply make my website work on IE, it looks like a fairly simple layout, only one column... But the tricky part is the collapsible sidebar. First of all, it uses transparent images, and Internet Explorer 6 does not support transparent images (PNG) unless using hacks. Then, the sidebar always have to be as tall as the page is, and that is fairly easy with css, but almost impossible to make it work seamlessly in our evil IE. And I feel way better without this extra ugly code on my blog.

There is tons of websites talking about fixing internet explorer, but the most helpfull one is for sure http://www.positioniseverything.net/, thouthands of web developpers that struggle with IE go there everyday...

How to for Drupal

Edit : I UPDATED THE WAY I BLOCK IE, AS THIS VERSION WASN'T VERY RELIABLE... see version 2

Version 1

For thoose of you who wonder how I did this, it is fairly simple. First, I have to identify the user's browser type.

Then, I have to make a condition in my page.tpl. php that check if the browser is IE or not.

If it is IE, it only shows the IE regions, that only contains one block (the one you can see if you are an IE user. If not, then I show all the normal regions. Fairly basic, but I seam to have a problem with browser detection stil... not that I really care about what IE users see or not, but I prefer to show them how to get better by downloading good web browsers, than rubbing their nose in an ugly not-debbuged website...

Version 2

Instead of having an alternative region for IE, you can also redirect internet explorer to an alternative html page. I created an html version of the 'No IE' page (I basically just copied and arranged the source of the page) and added a little snippet of code that redirect only IE to this page (added at the top of the page, even before the DOCTYPE):

A new hope for drupal : Basic and Conditionnal Styles

For the longest time, the best solution to debbug IE was to set an alternative stylesheet like this (in the head):

This works fine, except that it loads this bit of code for all browsers... not clean (or UNCLEEAAAN!!! as my friends B. mann would say... or scream..). Now some new alternative are coming out for Drupal, and one of them is in the BASIC theme in its version two. Basic analyses the browsers of the user and make it a body class. So if you are on firefox 3, the body class would be : browser-firefox3. If you are on internet explorer 6, it'll bee browser-ie6. So to debug something for a specific browser, you only ave to ad this specific class :

Another new alternative is a recent module called 'Conditional Stylesheets'. It is not yet supported by Basic, but maybe in a near future. It basically dinamicly adds the stylesheets calls depending on your browser. The only small downside is that it's a module that you have to install...

All this effort and hard work for an obsolete and non-standard solution... this is getting ridiculous !

• next post
• prev post