"I just feel old and tired of all this: I think it's time to retire"

AB: Thank you for being with us today, Mr. Explorer 6. How are you?

IE6: I’m glad to be here, Alberto. I’m fine, just a little bit tired.

AB: Tired? You are just 9 years old! You’re still a kid, you should have plenty of energy!

IE6: Well, you know, browsers’ age is not equivalent to humans’. If you consider how fast technology is evolving I already have more than 80 human years.

AB: Really?! I didn’t know that! And you are still working full time, that’s astonishing… Congratulations!

IE6: Thanks. Yes, actually I’m still in business and still have a good share in the browsers market. In 2009, for instance, 15% of the people who visited your website came through me!

AB: This is definitely a relevant percentage! I didn’t know. How is this possible? Why people are still using you and not, for example, your son IE7 or your nephew IE8?

IE6: This is probably due to machines who still run old versions of windows, such as Windows 2000, and cannot upgrade to my most recent releases.

AB: Anyway, that’s not a good excuse: I apologize for being so straight… but there are so many browsers out there that could replace you… so why people don’t upgrade?

IE6: I appreciate your frankness and I agree with you. Anyway, I’m mainly talking about companies, governmental institutions, schools and universities… Sometimes system administrators are just too lazy to perform an upgrade.

AB. Damned system administrators, it’s always their fault… Anyway, it’s good for you, isn’t it?

IE6: Well, at first I loved the idea of being still on the market. But now, to be honest, I start to feel old, sometimes I don’t even have time to sleep. My wife keeps telling me I’m working too much and moreover several important big companies seem to have already cut back on my support.

AB: Are you referring to Digg, Youtube and Facebook?

IE6: Yes, and many more. Last week even Google announced that my support will be discontinued from March 2010…

AB: Oh, what a bad news… What was your reaction?

IE6: They literally broke my heart! They have no respect for old men, they could have called me at least to say goodbye after so many years… [A tear drops down Mr. Explorer 6's eye - AB]

AB: Ehm… I see… So what are you going to do now? Are you planning to fight and increase your competitiveness in order to cope nowadays young browsers?

IE6: Competitiveness!!?? I just feel old and tired of all this: I think it’s time to retire… [Blows his nose -AB]

AB: Retire? Are you serious?

IE6: Absolutely. I had my moment of glory, now I can retire and spend my last years enjoying life and good food…

AB: It’s not such a bad perspective, is it? Are you planning to move on after your retirement?

IE6: Well, actually I was thinking to go to Florida but they told me that there is this lake in Italy called Lake Como, they told me that also George Clooney has a house on its shore. Apparently Italian food and wine are delightful!

AB: You said it! I’d really recommend you to move to Italy if you enjoy good food and wine!
Thank you very much for the interview Mr. Explorer 6. We wish you all the best with your new life!

IE6: Thank you so much. I appreciate it.

A common solution in order to use freely typefaces while designing a web page, is creating graphical representations of the text content;  this solution apparently works well, however it is not efficient and not easy to update when the text content changes, as each text must be written or modified manually through an image manipulation software.

For this reason web designers normally use a narrow range of fonts in their web pages and usually adopt web-safe fonts.

Nevertheless, there are some interesting alternatives. Facelift is an excellent solution in order to use custom fonts in your web pages writing simple text while not dealing with images creation and updating.

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between!

Give a look to these examples!

Facelift is free software released under GNU/GPL license. It requires a quite common web server configuration (PHP along with GD libraries with freetype and PNG support enabled) and can be freely downloaded from the official web page.

In this article I’ll introduce the declaration !important in CSSs and explain how to use it as a “workaround” to avoid adopting IE proprietary code to obtain the max-width effect in your web pages.

When a CSS propriety is specified twice, the browser will commonly use the last one. Let’s see an example:


#main {
width:600px;
width:800px;
}

In this example the browser will assign width 800 pixels to the #main element.

The declaration !important can be used in cascading style sheets to give priority to some parameters.


#main {
width:600px !important;
width:800px;
}

In the example above the browser will give priority to the first declaration and the #main element will be 600 pixels width.

So, what’s the point?
Internet Explorer 6 and previous versions simply ignore the declaration !important (while IE 7 supports them) therefore we can take advantage of this issue to design a “browser-based” CSS.

Let’s consider, for example, the CSS proprieties max-width and min-width: these parameters specify a maximum and minimum width of a web element (such as a table or a DIV container). This is a useful feature which allows to create fluid and dynamic layouts that can be displayed correctly both in low resolutions (e.g. 640×480) and in very high resolutions.
Unfortunately IE 6, among other things, doesn’t even support the max/min width declaration: in order to obtain the same effect under IE6 you can use a proprietary code:

#main {
max-width: 900px;
width:expression(document.body.clientWidth > 900? "900px": "auto" ); /* IE proprietary code */
}

In this example the #main element will be rendered with a maximum width of 900px both in Firefox, Safari, Opera and Internet Explorer.
Please note that the proprietary code width:expression is not a valid CSS declaration, so if you decide to adopt it, your stylesheet won’t respect web standards and won’t be validated.

However, we can use the !important declaration to avoid non-standard CSS expressions. Here is a “workaround” which allows to use max/min width with smart browsers and specify a fixed width for IE 6 users:

#main {
margin: 0 auto 0;
max-width: 900px;
min-width: 770px;
width:auto !important;
width:800px;
}

In the above example (you can see it in action on this website) the declaration !important is used to specify dynamic width attributes to browsers that support them (e.g. Firefox, Netscape, Opera, Safari and IE 7) while the width is fixed to an average value (800 pixels) for IE 6.
This doesn’t solve completely the matter, but can be considered as a workaround to improve your fluid layout appearance avoiding non-standard code.

Multiple Internet ExplorerS

Here is a useful tip for web designers and developers who want to test their website with different versions of Internet Explorer.

As a web designer you’ll have to test your website with multiple browsers in order to check the correct behavior of your pages on different platforms.
Whether you like Internet Explorer or not, you’ll have to carefully test your new pages with this browser, which sucks doesn’t respect many international web standards, but unfortunately is still the most popular among internet surfers.

If you update your copy of Windows XP, IE 6 will be replaced with the new version 7. Anyway you may need also the previous version (which is currently the most wide spread) to test your web pages.

Now there is a simple way to install standalone copies of Internet Explorer!

Just download the multiple IE installer at this page: http://tredosoft.com/Multiple_IE

You’ll be able to easily install old Internet Explorer versions (3, 4.01, 5.01, 5.5 and 6) and run them side by side with IE 7.

The installer currently supports only Win XP and doesn’t work under Vista.

IE 6 VS Firefox showing PNG images

I haven’t been using Microsoft Windows since 2003; I’m a happy Linux and Mac user.

Why should I talk about Internet Explorer then?

Internet Explorer is the most popular browser among internet surfers; do you have a website? Just check your stats and you’ll find that the average of visitors adopting this browser is around 70-80%.

Visitors don’t use IE because it is a good piece of software; I prefer to think that the majority of non-expert users don’t choose it, they just find the icon on their Windows desktops (I also believe they don’t even choose Windows, as they simply find this OS already installed on their computer… but that’s another story…).

IE users probably won’t experience very serious problems while surfing the net. However, from a web designer perspective, Internet Explorer is a real nightmare: you design and validate your web pages following carefully w3c recommendations in order to have a clean and accessible code… You separate the structure from the graphics using CSS… Then you test your work with different browsers and… boom! You find out that something in IE doesn’t display correctly because it doesn’t support important web standards and CSS specifications.

That’s the paradox: the most wide spread browser in the world doesn’t follow international web standards defined by the World Wide Web Consortium!

Let’s consider two examples with IE version 6 (or lower):

1. A CSS2 declaration called max-width allows to apply a value to the maximum width of a container (e.g. <DIV>) in order to create a fluid layout which resizes and fits lowest monitor resolutions (800×600 is still common, especially in old computers), but don’t exceed in width with higher resolutions. This is an elegant solution to design a dynamic layout, but unfortunately IE 6 doesn’t support it, it just ignores this declaration. These specifications have been written in 1998 by w3c (please check yourself the date at the top of the page), this means that for almost 8 years “developers” at Microsoft simply IGNORED these standards…

2. Have you ever heard about PNG image format? It’s really cool as it supports alpha channel transparency, you can obtain very nice effects on your webpages using this format. Internet Explorer doesn’t support it! In the example picture posted here you can see the same web page (containing a simple PNG with alpha channels I created) displayed in IE and in Mozilla Firefox: the first one just shows the PNG image creating a white background, while in Firefox (and other browsers) this PNG blends perfectly with the blue background. Here’s the potential of transparency! It would be great to use PNG on websites to create alpha channel shadows or web elements… But we just can’t… because of Internet Explorer.
(Web designers can adopt GIF format as a kind of replacement for PNG, but that’s not the same. GIF has many limitations as it supports just 1 color transparency and you can’t create antialiased web elements which are independent from background).

Internet Explorer 7 seems to have solved some of these CSS and graphic issues (at least the two ones I mentioned here), clap clap clap ;-) So why I am complaining about it?

Internet Explorer 6 is still the most wide spread browser in the world and version number 7 performs an authenticity control and can be installed just on genuine copies of Microsoft Windows.
We all know there are millions of users out there with a non genuine copy of Windows, aren’t there? (no, I’m not among them, I have a genuine copy: I HAD to buy it because it was included with my laptop…). Although on the net can be easily found procedures which explain how to avoid this control (and install IE7 on a non-genuine copy of windows), I suppose that many users won’t be able to upgrade their software: and that’s the point! (I’m not arguing about the importance of buying original software).

As Internet Explorer plays such an important role on the practical application of web standards, it is Microsoft’s duty to correct these errors and promote the switch to the new version of their browser. If they offer IE 7 as a limited upgrade, I expect many internet surfers will go on using version 6 for some years… [Update 5-10-2007: since october 2007 Internet Explorer 7 is available as a free update also for irregular windows users.]

Alas, what can we do?
It’s easy: do not use Internet Explorer!!!