How To Design Websites For Internet Explorer

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.

Tips For Cross-Browser Compatibility

Below we give some tips on how you can go about beating the IE beast. 

1. Ensure compliance with web standards.

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.

2. Use separate stylesheets.

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" />
<![endif]-->

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" />
<![endif]-->

The full list of operators that you can use to define which stylesheets are rendered include:

  • gt: greater than
  • gte: greater than or equal to
  • lt: less than
  • lte: less than or equal to

And modern browser versions that you can target include:

  • IE 5
  • IE 5.0
  • IE 5.5
  • IE 6
  • IE 7

As you will find, conditional statements are a very handy tool. But you don’t need to limit their use to defining stylesheets.

3. Use conditional statements for HTML elements.

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: , , ,

1 Response to “How To Design Websites For Internet Explorer”

Trackbacks

Trackback URL:

Leave a Reply

Want us to work on your project?

Contact us today for a quote. Click here to submit details regarding your project.

If you are making a general inquiry, send an email to info@velvetblues.com

Go Daddy Deal of the Week: Cheap .COM Domains! Offer expires soon!