Fire Studios

In today's generation, an internet user can select from any range of browsers to use for their daily trudge through the net: IE, Firefox, Safari, Opera, Google Chrome, but this freedom of choice has turned into an uphill battle for web developers when it comes to CSS, HTML, and JavaScript. We're constantly faced with the challenge of making our codes and designs look and function the same in every major browser a client’s site receives.

The main trouble with this is every browser reads and renders the website’s code differently. Each browser uses a different layout engine that decides how to process code injected into it. For example, IE uses the engine "Trident" (also known as MSHTML) while Firefox uses "Gecko" and Safari uses "Webkit" and so on and so forth. Each engine has its own strengths and faults which developers have to keep in mind when we’re coding our sites.

In this series I'll be covering the 3 general areas of Cross-Browser compatibility issues: HTML, CSS, and JavaScript; and I'll be detailing how we developers can code around these faults to help limit their impact. This post will cover the HTML issues between the browsers.

HTML

HTML may be the most widely used and supported programming language out there, but that doesn’t stop layout engines from parsing this code of their own will. HTML quirks (outputs that vary according to layout engine) are just about the hardest to notice without a well trained eye or experience fighting these quirks into standards compliance. The most widely encountered quirks are those involving images, and as such is what I'll be discussing.

Transparent Images (IE6 & earlier)

By far the most famous browser quirk of all time is the IE6 Alpha transparency incompatibility where if you used a .PNG file with any transparency it would display the transparent areas as a gray color since IE6's Trident engine had no support for alpha transparency. Lucky for us developers, through its fame, NUMEROUS fixes and end-arounds have been written for this bug from CSS to JavaScript.

Fixes/Solutions

• Add in the CSS property

  img { filter: chroma(color="#D4E6EA") }
  

• Use one of the MANY JavaScript fixes

Images size ignorance (Firefox)

Firefox has a nasty habit of completely ignoring any height or width definitions declared onto an image if that image is not linked correctly or "broken". This usually leads to a portion of your site becoming incorrectly.

Fixes/Solutions

• Use CSS define the height and width to the parent container.

  #img-wrapper {width: *width of image*; height: *height of image*;}
  

• Use jQuery to dynamically apply the height and width of the image to the parent container

  $(document).ready(function(i){
  
  $("body").find("#image-wrapper").each(function(e){
      var height = $("img", $(this)).attr('height').val();
      var width = $("img", $(this)).attr('width').val();
      $(this).css({
          "height" : height,
          "width" : width
      });
  });
  
  });
  

Final Thoughts

Though browsers are constantly being updated (some taking longer than others… talking about you IE) they’re beginning to be more and more standards compliant, which directly means a better user experience for the viewers. With HTML5 going mainstream in 4-5 years, we’re bound to see even more quirks and errors surface in regards to the next elements and tags released, but it’s up to us developers to discover, report, and provide temporary fixes until the solution is provided from the browser companies themselves.

Remember: The best way to fix and avoid these incompatibilities is to write good code!