Mini Tutorial: How to Fix Cross-Browser Compatibility Issues

Nowadays, a significant advantage over competing companies can be achieved by having a proper Responsive Web Design (RWD) for your website. It’s one of the best ways to acquire more customers and/or users, since you will be giving them an optimal viewing experience, eliminating the hassle of scrolling and panning and replacing it with flexibility and fluidity.

Your website will be easy to view at the correct size and style for all the many new different media devices and screen sizes that more and more people are now using to browse the internet. But if you are reading this blog post, you are probably already aware of the value and usefulness of responsive web design.

Specifically, for the purposes of this tutorial, you should know that it is equally important for your design to function in all browsers. So, let’s get started!

I’m going to show you how to fix cross-browser compatibility issues for your flexible images:

The first line of code you should write in your styles once you have a container for your image (img) is:

img {
  max-width:100%;
}

This rule forces the image’s width to match the width of its container and it can also be applied to most rich media elements on your site such as video or sliders. All browsers support max-width except for Internet Explorer 6 and below. Now, the necessity of having your website work in IE6 isn’t very high these days but it’s good to know the way to fix it.

The Easy Way:

img {
  width:100%
}

That wasn’t too bad right? But you’ve got to be careful using this rule. ‘max-width:100%’ tells your media elements to never exceed the width of their containers while ‘width:100%’ forces them to always match the width of their containers instead. If all you have is large images then you will be ok, but if you’re working with, let’s say, thumbnails, then it might not be a good idea to stretch them past their highest resolution size.

The Sort of Easy Way:

img.full,
.main img {
  width:100%
}

In this example we are targeting certain images or specific containers where you know you’ll be dealing with oversized media, so your smaller sized media stays intact instead of becoming an eyesore.

The last issue we need to take a look at is not really a browser-specific issue as much as a platform-specific one. Windows doesn’t do a very good job when you try to resize images via CSS, they tend to develop artifacts, impacting their quality. This bug only affects IE7 and lower as well as Firefox 2 and lower on windows (It seems to have been fixed in Windows 7). Unfortunately there is no reliable fix for Firefox, but IE does have a toggle.

The Not So Easy Way:

.logo { 
  background: none;
  filter: progid:DXImageTransform.Microsoft.
  AlphaImageLoader(src="/path/to/logo.png",
  sizingMethod="scale");
}

AlphaImageLoader is one of Microsoft’s proprietary CSS filters. Applying this rule to an image dramatically improves rendering quality in IE, matching every other browser’s quality. But this leaves us one last step to take care of.

What AlphaImageLoader actually does is it creates an object that sits between the image and its background. It replaces the src attribute of the img element with a transparent “spacer” GIF that will be resized in order to match the original element. Sadly, this causes a bug for our max-width:100% / width:100% approach because the GIF has its own physical dimensions; it won’t scale properly within its container. So, you will need the following script to help you out with that.

Here’s How It’s Not So Easy:

var imgSizer = {
     Config : {
          imgCache : []
          ,spacer : "/path/to/your/spacer.gif"
     }
     ,collate : function(aScope) {
          var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
          if (isOldIE && document.getElementsByTagName) {
               var c = imgSizer;
               var imgCache = c.Config.imgCache;
               var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
               for (var i = 0; i < images.length; i++) {
                    images.origWidth = images.offsetWidth;
                    images.origHeight = images.offsetHeight;
                    imgCache.push(images);
                    c.ieAlpha(images);
                    images.style.width = "100%";
               }
               if (imgCache.length) {
                    c.resize(function() {
                         for (var i = 0; i < imgCache.length; i++) {
                              var ratio = (imgCache.offsetWidth / imgCache.origWidth);
                              imgCache.style.height = (imgCache.origHeight * ratio) + "px";
                         }
                    });
               }
          }
     }
     ,ieAlpha : function(img) {
          var c = imgSizer;
          if (img.oldSrc) {
               img.src = img.oldSrc;
          }
          var src = img.src;
          img.style.width = img.offsetWidth + "px";
          img.style.height = img.offsetHeight + "px";
          img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
          img.oldSrc = src;
          img.src = c.Config.spacer;
     }
     // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
     ,resize : function(func) {
          var oldonresize = window.onresize;
          if (typeof window.onresize != 'function') {
               window.onresize = func;
          } else {
               window.onresize = function() {
                    if (oldonresize) {
                         oldonresize();
                    }
                    func();
               }
          }
     }
}

This script will find any images in your document and create a series of flexible, high-quality AlphaImageLoader objects for them.

The Finish Line!

That’s it, now you’ve got all you need. With max-width:100%, width:100% and our AlphaImageLoader patch in place, all images on your site should become flexible and will scale in proportionate harmony whenever the browser window changes size.