Web Design and Development
Previously, we published an article on the versions of Internet Explorer that you should view when testing your website for cross-browser compatibility. Certain versions, for example, can be ignored because they are obsolete or have very limited usage. Yet, even if you can neglect a few versions, you will still need to figure out the various tricks and hacks to ensure cross browser compatibility across the versions still in use.
Below we give some tips on how you can go about beating the IE beast.
Although Internet Explorer does not fully comply with web standards, this will ensure that your websites are likely to display properly among most browsers, such as Firefox, Safari, and Opera, as well as the latest versions of Internet Explorer.
To verify compliance you can check out the validator tool at http://validator.w3.org/
Additional documentation on HTML and CSS can be found on the Word Wide Web Consortium website.
For some website layouts, web designers may find that the site looks different when viewed across each version of Internet Explorer. And sometimes, no amount of tweaking can fix this problem. Fortunately, there is a solution.
If necessary, you can create different stylesheets for each version of IE. This way, you will not have to find one universal set of styles. After all, with IE, one size rarely fits all.
Creating stylesheets for different versions of IE is as simple as entering conditional comments or statements in the head of your HTML document. See the example below:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6styles.css" type="text/css" />
In this example, we have targeted IE6. However, this same technique can be used to target whichever version you want. You are also not limited to simple if statements. In the following code snippet, for example, all browsers less than IE 5.5 are targeted.
<!--[if lt IE 5.5]>
<link rel="stylesheet" href="ie5styles.css" type="text/css" />
The full list of operators that you can use to define which stylesheets are rendered include:
And modern browser versions that you can target include:
As you will find, conditional statements are a very handy tool. But you don’t need to limit their use to defining stylesheets.
In addition to using conditional statements to specify which stylesheet should be used, you can also specify additional statements or elements that should be displayed. This means that conditional statements can also be used in the body of your html document.
In most cases, this isn’t necessary, but it is often used to add an additional containing elements, such as divs or tables. And it can also be used to display browser-specific notices to your website visitors.
In the next article, we feature one must-have tool for previewing your website across all versions of IE.Tags: browsers, conditional statements, cross-browser compatibility, internet explorer