Handling Browser Incompatibility

August 4, 2015 Browsers

Online world consists of a number of devices, operating systems and browsers. Innumerable number of people are accessing websites on countless combinations makes the work of a web developer difficult. A web developer cannot simulate the perfect combination to design and develop websites to give a consistent view on any platform.

If a visitor to a website says that your website looks fine in Mozilla firefox but when she browses the same in Internet Explorer, your content displays with a different layout. Such behavior of a website is called browser incompatibility and it happens if a specific browser does not support some tags used in HTML code of your website. This also happens if the browser fail to decode deprecated tags or if CSS or JavaScript code are written incorrectly.

Browser compatibility is the major restriction design a well received and consistently presented website. Many Issues are related to browser compatibility. Few of them are discussed here along with the possible way outs-

Clever design to handle resolution variations

The resolution of screens starts from 800X600 to 1024X768 and higher. If you design website for an 800X600 pixel screen but user browses it on a higher resolution screen, the page will appear shrunk, giving an undesirable impression. If you design your website for higher resolutions then same webpage on a low resolution screen will go beyond screen. As a result a horizontal scroll will be activated for user to scroll and view the complete content. This also doesn’t go well with your visitors.

To handle this issue you must design your pages cleverly. Placing the important content in the middle section and lesser important towards the margins is a smart way to tackle this problem. When browsed on a high resolution screen webpage displays all content and for lower resolution screens pushes less important content outside screen. Users will not miss much of the action.

JavaScript compatible browsers

The W3C defined a set of web standards. All browsers must follow these standards to make a correct rendering of WebPages. But this is not the situation. Browser developers incorporate their own methods to do specific activities. This is the reason for a few compatibility issues.

To take care of this problem you can include a JavaScript code in your HTML code that detects the browser with which the user opens the website. Or alternatively you can add a cross-browser function to get an element by its ID to handle the situation where a newer version of browser is available.

Default CSS style of browser

Every browser has a default CSS style which can introduce browser inconsistencies in line heights, margins and font sizes of headings etc..

This problem is easy to handle by creating a master stylesheet at the website level. If a master stylesheet is defined and referenced in all the web pages, it will override the default CSS style of the browser. Clearing out the default browser settings removes the problems in cross-browser web design.

Cross Browser Compatibility Issues & How To Solve It By Anil Gupta


As a web developer the biggest challenge that you face is to develop a website that gives a consistent view across various browsers. If you implement the approaches discussed here to your website, you can give a smooth and consistent experience to your web site visitors.