Jump to Navigation

Cross Browser Compatible Code - Part I

Printer-friendly versionSend to friendPDF version
January 27, 2010

Cross Browser Compatible Code - Part I

As any professional web developer will tell you, developing a website that renders consistently across all flavors of web browser is nearly impossible without having some tricks up your sleeve. This depends, of course, upon how complex the site is that you are building, but even the simplest of designs can easily go awry if you are not careful. It would seem that the bane of a web developer's existence lies within the Internet Explorer family, most notably any version before 7.

This blog post will be the first in a series of tips and tricks for dealing with flummoxing cross-browser issues. However, before I delve into the meat of this particular blog post, a little background information is in order. Back when I developed my first web site approximately eight years ago, Internet Explorer was still all the rage and had a ridiculously large market share. So for those who were embarking on their respective web development journeys during this time, Internet Explorer was essentially what web sites were designed for. Since about 95% of the world was using it, namely because of Microsoft's hold on the market, I had made the mistake of using it for my primary testing ground. However, 95% isn't 100%, and I started getting some complaints about my site not displaying properly. I had heard of Firefox, but wasn't overly concerned with it. When content didn't line up properly, I would fine tune it for IE, not knowing that I was really digging a bigger hole for myself by doing this. As I will explain throughout this series of blog posts, I was fine tuning my site to the debilitating bugs that IE had so many of.

So I had found out what it was like to develop a website without using the proper coding standards the hard way. Now, after much re-learning of web development and my professional experience with Zone 5, the creative marketing company whom I still have the privilege to design sites for, I'm glad to be in a position to help others with similar problems.

I will finish this post with a couple of quick tips that many web developers already know, but is important enough to make sure that you start using immediately if you aren't already. Always, always, always use a separate stylesheet declaration for Internet Explorer like so:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="styleIE6.css" />

The above are "IE comments", that only IE will recognize and other browsers will dismiss as a comment. This way, you can include separate rules for different versions of IE without using CSS "hacks" that ultimately cause more problems then they fix. I'm making a specific reference to IE 6 here, but you can specify any version. Since most of the bugs that I need to account for apply to IE 6, I usually use:

<!--[if lte IE 6]

This means "if less than or equal to version 6", so if you have a visitor to your site that is still running IE 5.x for whatever reason, you're covered.

Tip #2:

Using essentially the same syntax, you can avoid triggering a nasty "float" bug in IE6 that is caused by using ordinary comments like

<!--- end div -->
around floating elements. Extra characters will appear where you don't expect them. To avoid this use:
<!--[if !IE]> end div <![endif]-->
instead of using
<!-- end div -->

The ! is a negation character, meaning "if not IE", so IE will not try to read what's inside the comment. All other browsers also dismiss it as a simple comment.