[Skip top navbar]

Andrew Gregory's Web Pages

Sunset at Walganna Rock, 27°23'54"S 117°28'9"E

-

MSIE


From a user's point of view, there isn't much wrong with IE. It certainly renders just about all web pages without any problems. Of course, since web designers would be stupid not to test their work in IE and dumb down their sites appropriately, it shouldn't be a surprise.

The problem I have with IE is that it is basically stagnant and neglected by Microsoft. Apart from security bug fixes, nothing new has happened to IE since October 2001. Other browsers such as Opera, Mozilla (including Firefox), Safari and Konqueror are all actively maintained with new features being added all the time. All these browsers support popup ad blocking (and have done for years), something Microsoft will only be adding in the Windows XP Service Pack 2. As at 2003-12-26 it's not known if non-XP users will get the update.

IE is "yesterday's" browser, now moving into much the same role as Netscape v4.x.


Hints for Web Masters

Site Design

In general, I'd recommend designing sites using XHTML (1.0 Transitional) and CSS. Develop using a standards-aware browser such as Opera or Firefox, then adjust as required to keep IE happy.

IE vs the World

Quite often, web masters find themselves needing to do something for IE that's different from everything else. That most often applies to CSS, but also applies to other web techologies such as Flash animations (or <object> elements in general).

HTML

To deliver one bit of code to IE, and a different bit to other browsers, Microsoft's proprietary Conditional Comments are the best tool for the job.

<!--[if IE]> <p>Only Internet Explorer sees this.</p> <![endif]--> <!--[if !IE]>--> <p>Only Internet Explorer <em>does not</em> see this.</p> <!--<![endif]-->

I found this technique from Ian Hixie's Flash demo.

You can also use this technique to hide invalid code for IE workarounds from the W3C validators.

CSS

With the release of IE7, it seems the common recommendation is to use the above conditional comments to give IE one set of style sheets, and other browsers a different set. Or just deliver to IE a special 'fixup' style sheet in addition to the standard style sheets given to every browser, including IE.

The problem with conditional comments is that they pollute every web page on your site. A better technique might be to take advantage of a parsing bug in IE versions 5+ (including v7). It is the IE @import hack.

In short, your web code could be standardised to:

<link rel="stylesheet" type="text/css" href="stylesns4.css" /> <!-- all browsers --> <style type="text/css"> @import url(styles.css); /* all browsers except Netscape 4 */ @import url(hacks.css) all; /* IE loads "url(hacks.css) all", all other non-NS4 browsers load "hacks.css" */ </style>

You end up with four style sheet files:

FilenameComments
stylesns4.cssStyles applicable to all browsers, including Netscape 4. This would probably just include the minimal styling (if any) you want to give to NS4.
styles.cssStyles applicable to all browsers, except Netscape 4. This is where the bulk of your styles would likely end up.
hacks.cssStyles applicable to all browsers, except Netscape 4 and IE-Windows. Probably very little in here.
url(hacks.css) allYes, that is the correct filename! Styles applicable to IE-Windows. See more detailed comments below.

The IE-Windows file "url(hacks.css) all" deserves some extra comments. First is a concern that because the filename has no extension, most web servers will serve it as type "text/plain". This is not a problem as IE does not need stylesheets to be served as "text/css" in order to recognise them. Second is that this file is served to all current versions of IE-Windows, that is: 5, 5.5, 6, and 7. To give different styles to the different versions requires more hacks. I used the centricle css filters as a reference. Here is a sample template for this file:

selector { /* rules for all IE-Windows browsers */ property: value; } * html selector { /* rules for IE-Windows versions 5, 5.5, 6 */ property: value; /* IE-Windows 5, 5.5, 6 */ p\roperty: value; /* IE-Windows 6 only (backslash only works on g..z) */ } html>body selector { /* rules for IE-Windows 7(+) */ property: value; /* This cannot be relied upon for future versions as the triggering @import hack will be fixed at some point. Hopefully by then the reason you need to hack IE 7+ here will have been fixed too! */ }

The hacks shown here allow you to deliver styles to just IE7, just IE6, but not to just IE5.x. In my opinion, support for IE 5.x should be dropped, especially now that IE7 has been released. They're more than six years old!

Flash Animations

The following techniques used to load Flash and Java have been tested and found working with IE6.0, IE5.5, IE5.0, IE4.0, Firefox 1.0PR, Opera 7.54, and Netscape 4.8.

Flash first:

<!--[if IE]> <object width="320" height="200" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <![endif]--> <!--[if !IE]>--> <object width="320" height="200" type="application/x-shockwave-flash" data="movie.swf"> <!--<![endif]--> <param name="movie" value="movie.swf" /> <param name="quality" value="high" /> <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /> You should see a Flash movie here. </object>

You should see a Flash movie here.

The following is shorter, but does not include the code needed by Internet Explorer to automatically download the plugin if it isn't already installed. I also believe that Internet Explorer won't stream this shorter version (apparently the classid attribute is needed for that):

<object width="320" height="200" type="application/x-shockwave-flash" data="movie.swf"> <param name="movie" value="movie.swf" /> <param name="quality" value="high" /> <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /> You should see a Flash movie here. </object>

You should see a Flash movie here.

Java Applets

It is also usable for Java applets. Note that Internet Explorer requires the use of the codetype attribute and will not work if the type attribute is used instead. Internet Explorer also requires the ugly classid attribute to use the Sun Java Runtime. Without that it will fall back to the Microsoft Java Runtime, which only supports version 1.1 applets.

<!--[if IE]> <object width="170" height="150" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"> <![endif]--> <!--[if !IE]>--> <object width="170" height="150" codetype="application/java" classid="java:Clock.class"> <!--<![endif]--> <param name="code" value="Clock.class" /> <param name="archive" value="clock.jar" /> You should see a clock here. </object>

You should see a clock here.

Or, again, a shorter version (but note that without the ugly long classid, applets built with a Java later than 1.1 won't work):

<object width="170" height="150" codetype="application/java" classid="java:Clock.class"> <param name="code" value="Clock.class" /> <param name="archive" value="clock.jar" /> You should see a clock here. </object>

You should see a clock here.

See also my Apple 2 Emulator Applet page.

Other Techniques

There are also several techniques used to bring support for more standards to IE:

The common thing about many of the above techniques is that they mostly require few changes to your page markup, except for adding script or stylesheet references into your document <head>. You can then wrap them all into an IE conditional comment! That way you minimise downloads for the non-IE browsers that don't need them, and it hides any invalid proprietary IE code from page validators.

Microsoft have also released a developer toolbar. Very handy for troubleshooting your web pages.


-