Experimental Website

When I first tried out the new Microsoft Internet Explorer (IE) 8, I thought that there will be no problems in displaying the contents of this my website which was created with such Microsoft tools as Expression Blend and Expression Web. First I tried it on my old Windows XP machine with small amount of memory. It only has 256 MB of RAM. The website was slow which is something that I would expect on a machine with limited resources. But I was unprepared to see that not only it ran slow but also the website elements were not displayed correctly the way they were displayed in IE7. Then out of plain curiosity and to be 100% sure, I installed it on my most powerful Windows Vista x64 machine to only see the same behavior. At this point, I had nothing to do but to find the ways out of the situation. I conducted some research on the internet and managed to resolve almost all the compatibility problems between IE7 and IE8. In this blog I will try to describe some of the problems that I encountered and how I managed to resolve most of them.

The first thing I noticed is that some objects being out of normal place, like the map of the Florida Melbourne area where I live. In IE7 I deliberately placed it next to the Windows Live Messenger applet so both were aligned in one row. In IE8 the map was right below the Live Messenger. After spending some effort and time I found out by simple trial and error that the style that was used by the map object was missing the 'float' property:

.style23 {
        width: 380px;
        height: 500px;
        position: relative;
        left: 5px;
        top: 0px;
        border:
        solid 2px black;
}

When I added 'float':

.style23 {
        width: 380px;
        height: 500px;
        position: relative;
        left: 5px;
        top: 0px;
        border:
        solid 2px black;
        float: right;  ←
}

everything was back in place. But now I had a dilemma how to make it so that this change would work for both versions of IE. Fortunately, Microsoft took care of that since the release of IE5. In the developers section of the IE8 website Microsoft refers to the so called conditional comments. The beauty of these comments is that they are good when one needs to know which IE browser version is used. Let me here to spend a little be more time on these wonderful conditional comments. There are two types of them, downlevel-hidden and downlevel-revealed. As per the below, the comments use '--' which make them true comments and hidden from any old browsers who do not recognize them as conditions. By dropping '--' they become downlevel-revealed conditional comments resulting in the content to be included in browsers that do not recognize them. In other words, the comments themseves will be ignored by such browsers but the content inside them will be processed. This feature allowed me to check the version of the IE used, and based on that to decide which style to apply. So the above 2 styles I combined as follows:

<!--[if gte IE 8]>
<style type="text/css">
.style23 {
        width: 380px;
        height: 500px;
        position: relative;
        left: 5px;
        top: 0px;
        border:
        solid 2px black;
        float: right;  ←
}
</style>
<![endif]-->

<!--[if lt IE 8]>
<style type="text/css">
.style23 {
        width: 380px;
        height: 500px;
        position: relative;
        left: 5px;
        top: 0px;
        border:
        solid 2px black;
}
</style>
<![endif]-->

In addition to the above I introduced the following tag in the head of the affected HTML pages:

<meta http-equiv="X-UA-Compatible" content="IE=8">

The above ensures that everything is processed according to the IE8 new behavior, and only when necessary the conditional comments take care of the incompatibility. As a long term solution, Microsoft suggests the above approach with conditional comments. These comments are very useful when it comes to determining at run time what version of IE is in use. They well resemble conditional pre-processor directives in C and C++.

The next nasty incompatibility between IE7 and IE8 that I discovered was the shadow filter issue (which also relates to the opacity filter and more). All of a sudden all my tooltip shadows disappeared in thin air. At first it was absolutely not obvious what was going on except for the fact that the following CSS property did not work at all:

filter: progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=135, strength=10);

Just like the previous problem, this one required some effort and time on the internet. In IE7 my tooltips looked nice with a shadow:




Now in IE8 it looked like:



According to CSS 2.1 specification, all vendor-specific properties must have a vendor prefix, such as -ms- for Microsoft, -moz- for Mozilla, -o- for Opera and so on. So Microsoft provided the list of all affected properties that can be found here. More useful information about IE8 can be found here.

So to resolve the shadow issue I added the following property to the corresponding .css file instead of the above:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=135, strength=10)";

Note that also double quotes are used because there are symbols like '=' that are now forbidden by the CSS 2.1 specification. What is interesting is that I can just have in the afected style something like the following:

.....
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=135, strength=10)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray, direction=135, strength=10);
.....

That is, the new property is just followed by the old one. Of course one can use the conditional comments as I described above but I found it simpler to just put one after the other. Regardless which way one prefers, IE7 will execute the old property statement and will ignore the new one. The same is true for IE8, which will execute the newer statement and will ignore the old one. Nice isn't it?