Fixing Design Problems in Internet Explorer

Historically IE (Internet Explorer) has always posed problems for web designers because of the many non standard quirks that have existed in various versions of Internet Explorer. Certainly IE 6 has been the bane of many a designer, IE 7 was a little better but still had some problems, IE 8 was better still, and IE 9 is certainly much better, but to the extent that you care about supporting older versions of IE you may face design problems that you need to solve so this article is intended to give some advice.

Do Not Design First in IE

Because IE is the least standards compliant browser historically, you should not use it when creating your design. Instead you should design in Firefox and/or Chrome, and once you are satisfied with the design in these browsers you can look for problems in different versions of IE and try to fix them using IE Specific CSS files that do not affect other browsers. These IE specific CSS files allow you to override CSS to fix the problems. If you design first in IE then your main design will have been done against a less standards compliant browser and if you have problems in other browsers it will be more difficult to fix them.

Fixing Problems in Various Versions of IE

Internet Explorer supports a comment syntax that lets you add CSS into the page in a comment section so it will not affect other web browsers but only IE which can see the the special syntax inside the comment. The following example illustrates the comment syntax to include a special CSS file for versions of IE lower than 7 (IE 6), and a special CSS files only for IE 7.

Custom file for IE 6 (note the "lt" means less than so it means IE versions less than 7)

<!--[if lt IE 7]>
<link rel="stylesheet" href="/Data/Sites/1/skins/artisteer-30verticalmenu2/style.ie6.css" type="text/css" id="IE6CSS" />
<![endif]-->

This example only affects IE 7
<!--[if IE 7]>
<link rel="stylesheet" href="/Data/Sites/1/skins/artisteer-30verticalmenu2/style.ie7.css" type="text/css" id="IE7CSS" />
<![endif]-->

This example affects any version of IE
<!--[if IE]>
css link or meta tags can go here here

<![endif]-->

Let mojoPortal handle the Custom Comment Syntax for IE

In mojoPortal we have a built in control in the layout.master file that takes care of adding these extra CSS files for IE.

<portal:IEStyleIncludes id="IEStyleIncludes1"  runat="server" />

by default it expects 2 files in your skin folder IESpecific.css and IE7Specific.css. You can override the names if you want to name them differently like style.ie6.css and style.ie7.css you can specify th efile names on the control like this:

<portal:IEStyleIncludes id="IEStyleIncludes1"  runat="server" IE6CssFile="style.ie6.css" IE7CssFile="style.ie7.css"  />

By default it does not include extra CSS files for IE 8 or IE 9, but it is configurable to support it. The following example shows configuration to include special CSS for both IE 8 and IE 9.

<portal:IEStyleIncludes id="IEStyleIncludes1"  runat="server"
IE6CssFile="style.ie6.css"
IE7CssFile="style.ie7.css" 
IncludeIE8="true"
IE8CssFile="style.ie8.css"
IncludeIE9="true"
IE9CssFile="style.ie9.css"
/>

So it is possible to override the main CSS using specific files for specific versions of Internet Explorer, making it possible to fix any design problems you find in those browsers after designing first in a more standards compliant browser.

Of course if you would rather have complete control over the comment syntax you are free to remove the <portal:IEStyleIncludes control from your layout.master file and directly add the markup/comment syntax.

Created 2011-10-25 by Joe Audette