Make IE behave like a modern browser

When developing websites, the fact that IE currently is dominating the browser market really is a mystery. It's the browser with the most bugs and least exiting features, its support for standards is crappy at best and there are way better free alternatives. I haven't really used any advanced features of the other browsers yet, problem is that IE fails at even the most basic stuff such as PNG images, abbr tags and CSS pseudo elements. So we need to give IE some help...

All of the above mentioned problems are easily fixed by either adding some extra CSS definitions or by adding JavaScript events. Adding it directly to the source would mean that we add unneeded markup to other (more modern) browsers, and thus using unnecessary resources, as such the best practise is IMO to fix IE's shortcomings through JavaScript helper functions.

IE & PNG

When Microsoft decided to include support for PNG images in IE (IIRC version 4.01), they decided not to include support for alpha channels support for transparency. Although it was/is an optional part of the PNG specification, not including support for it seems a bit like creating a car without window wipers. Microsoft eventually figured this out and have been promising full PNG support (for IE) for the last seven years, but the closest they've come is to add a proprietary extension with IE 5.5. However this does make a solution possible, albeight only for IE 5.5+ with JavaScript enabled...

// IE helper for PNG transparency...
// Usage: IeFixPngTrans(ImageId,SourcePng);

function IeFixPngTrans(ImgId,NewImgPath) {
  if (!document.getElementById(ImgId)) return false;
  var objElm = document.getElementById(ImgId);
  objElm.src = "spot.gif";
  objElm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + NewImgPath + "', sizingMethod='scale')";
  };

In the above example ImageId is an id assigned to the image we'd like to fix, while SourcePng is the path to the PNG image. This function actually creates a new instance of the image, so note that the function replaces the original image with a transparent image (spot.gif). You'll find a working example in the (self contained) demo document...

Abbreviations

This also is one of those things that make you wonder what motivates Microsoft to include support for something or not. Take this article as an example, as usual for something written about technology it's filled with abbreviations. And if it's the first time you're reading about PNG images you have no way of knowing that it stands for "Portable Network Graphics". <abbr> to the rescue! If you hover you mouse over one of those three letter occurrences (has a dotted bottom border) you'll get the full meaning of the abbreviation. A great little feature, though (surprise, surprise!) it isn't natively supported in IE. Again, however a solution is available through some JavaScript...

// IE helper for abbr(eviations)
// Based on a script by Marek Prokop (http://www.sovavsiti.cz/css/)

function IeStyleAbbr() {
  var objDocBody = document.body.innerHTML;
  var strRegexFind = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
  var strRegexReplace = "<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>";
  var objNewDocBody = objDocBody.replace(strRegexFind,strRegexReplace);
  document.body.innerHTML = objNewDocBody;
  };

The above function will add an extra <span class="abbr"> to abbreviation tags, so simply add declarations for this together with your normal styles for abbr tags. This technique was originally developed by Marek Prokup, although structurally different the above function basically does the same thing. A working example is in the demo document...

CSS' dynamic pseudo elements

Basically this is the ability to change page rendering in response to user actions such as mouse hovering. More details in part 5 of the CSS 2.1 specifications. With this in our toolbox it's a simple(r) task to create lightweight, accessible and standards-compliant CSS-only elements such as drop down menus. Then in from the right comes IE, which of course only implements :hover for link elements. Well luckily for us we can force the behaviour onto IE through JavaScript...

// IE helper for dropdown menus
// Based on a function by Patrick Griffiths and Dan Webb (http://htmldog.com/)
// Usage: IeBighFish(ContainerId,Elements);

IeBighFish = function(objId,objTag) {
  var objElm = document.getElementById(objId);
  var objTag = objElm.getElementsByTagName(objTag);
  for (var i=0; i<objTag.length; i++) {
    objTag[i].onmouseover=function() {
      this.className+=" sfhover";
      };
    objTag[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      };
    }
  };

This will add and remove the sfhover class to any processed elements as we move over mouse pointer over/off it, forcing IE to behave like a modern browser. In the usage example ContainerId is the id of the container for Elements we'd like to add the behaviours to. This technique was originally published in an article entitled "Suckerfish dropdowns" written by Patrick Griffiths and Dan Webb. The major difference between the original and this function is that the one above is rewritten to be more reusable (it doesn't contain any hard coded identifiers). Again you'll find a working example of the above technique in the accompanying demo document...

Forcing it onto IE

Since all of this is something that we don't want to bother modern browsers with, we wrap it up by placing the triggers inside an if query only matched by IE. Since I want this to be executed I append it all in the window.onload statement...

// Window onload event trigger
window.onload = function() {
  //General functions
  //IE Only

  if (window.attachEvent && !(window.opera)){
    IeFixPngTrans("alphatest","alphaimg.png");
    IeStyleAbbr();
    IeBighFish("menu","li");
    }
  };

I've prepared a document that demonstrates the above. To make stealing it easy, I've included all the necessary code inline. This work is licensed under a Creative Commons License. As always, comments and corrections are very much welcomed!

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.016 seconds...

Errors occurred while generating this page... (More info availible)