Testing Web applications for Internet browser compatibility

Achieving 100% cross-browser compatible Web applications is practically impossible, but following the right guidelines can make Internet browser compatibility testing much easier.

Achieving 100% cross-browser compatible Web applications is practically impossible and would require some head-tweaking every time a fresh new browser version appears. However, if you adhere to a few simple guidelines and principles, the time and effort it takes to test your Web applications for consistency across the major Internet browsers will be greatly reduced.

Testing on different Internet browsers

Since HTML is always growing and there are frequent releases of fresh versions of browsers, testing continues to be the most important part of a development life cycle.

My suggestion for cross-browser testing strategy would be to start by testing the complete website on any one browser, preferably Firefox because it is easier to debug and resolve issues - as compared to Internet Explorer (IE) - and it is also second most popular browser after IE.

After the testing is complete over one browser, then test it across the other browsers. This will help resolve compatibility issues in a systematic way. Internet browser compatibility testing is a vast topic and not limited to simple checks and validations. However, a discussion of each and every aspect of testing or testing tools is out of the scope of this article. Here are a few selected tips and tricks that you might find useful:

Tables vs  Divs

Tables have relatively low loading speed and large file sizes. So avoid using tables as far as possible and use <div> instead. You can achieve almost all the functionality of a table with <div>.

However, if you do need to use tables, do not leave any table cell blank. Some browsers are not able to read empty table cells, which could create issues in the look and feel of the Web page. The solution to this is to leave a blank space (add “&nbsp;”) in the empty table cell.

Display transparent images in Internet Explorer 6.

Simply add the following CSS property:

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


The "marquee" HTML tag can only be read by IE. We can use a JavaScript scroller as an alternative.

Retaining image sizes in firefox

Firefox completely ignores any height or width definitions declared with an image, if the image is not correctly linked or "broken". This usually leads to an incorrect display of some of the portion of your site. The solution is to place the image in its own container and define the height and width of the parent container in CSS.

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

Background Sound

Background sound is used mostly for personal or entertainment sites. The "bgsound" HTML tag is not cross-browser compatible. The alternative is to use an HTML embed tag.

<embed src="filename.wav" width="80" height="30" controls="smallconsole" autostart="false" loop="false">

Replace "filename.wav" with the actual name of your sound file. If you want the sound to start automatically when the page is loaded, change "autostart" attribute to true. Also, if you wish the sound to repeat, change the "loop" attribute to true.

Dig Deeper on Java testing frameworks

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.