Making Your Website Cross Browser Compatible	1.5/5.0 (2 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
Tim Trice May 03, 2007

Yesterday, I wrote that your first goal in designing a website should be optmizing the load time. After all, no matter how well the design, features, and information may be implemented, it means nothing if viewers will not wait to view your site. But, you should also devote equal time to ensuring cross-browser-compatibility as you do optimizing your website. As bad as it is that your visitors have to wait to view the page, its just as bad if your content is in disarray.

This is not an article that will bash Internet Explorer or Firefox, nor take sides with either of the most popular browsers. You can preach one browser over another and even promote your favorite on your website. But there will always be a good number of users that are using other browsers. Even if they are using Internet Explorer or Firefox, they may be using older versions. And all of this can expose weakness in your website.

Internet Explorer does have a reputation of not supporting as many CSS features as other browsers. Many programmers have learned how to overcome that issue by using hacks. Hacks are pieces of code that are not considered part of the CSS library, but can keep information visible to one browser while invisible to another. For Internet Explorer, the hack is usually simple. The following example is a common hack for 3-column-layouts:

#wrap {

min-height:100%;

width:780px;

margin:auto;

position:relative;

}

* html #wrap {height:100%}

Internet Explorer 6, for example, did not support the min-height CSS feature. Therefore, if you wished to use it, you would have to hack the line. Notice the asterisk (*) as the beginning of the last line. The asterisk allowed Internet Explorer to read the line, applying a 100% height, while Firefox and other browsers couldn't read the line.

I know some programmers (including myself) who at one point of time, instead of messing with hacks, they simply used a little bid of PHP or Javascript to include style sheets. You would have one style sheet for Firefox and other Mozilla engine browsers, another for Internet Explorer, a third for Opera, so on and so on. Yes, it can be more writing in the process. But, for me, at least, it always seems easier than getting one style sheet to fit multiple browsers.

So, how can you know what your website looks on other people's browser/operating sytem combo? There are tools out there. The two I use are BrowserCam.com and BrowserShots.org. BrowserCam does offer a small free trial, but it also has many more features and is much faster than BrowserShots.

Finally, keep in mind that it is your requirement as website programmer or designer to make sure everyone who visits your website can see it clearly. Though the vast majority of users prefer either Internet Explorer or Firefox, there are a number of users that use other browsers. Though the percentages may be low (less than 5% total), it can mean a huge difference when your running an affiliate or ecommerce website. Build a website for everyone to use, and you will be rewarded.