How to Fix Internet Explorer 6 Compatibility Issues in CSS
Web developers have long known that Internet Explorer 6 (IE6) has some glaring compatibility problems when it comes to cascading style sheets, one of the most famous being the way it interprets the width of boxed items. These kinks have been ironed out in later Explorer releases, but as of December 2009, IE6 still accounted for 21 percent of all browsers in use. Fortunately, there is special code you can use to instruct IE6 to use a separate style sheet, external or internal. This way, you can be sure your pages look the same in IE6 as they do in more CSS-compatible browsers.
Other People Are Reading
Instructions
-
-
1
Use a text editor to open the HTML page whose code needs fixing for compatibility issues.
-
2
Place your cursor between the <head> and </head> tags. You will want to enter the new code below any links to external style sheets and any internal style sheet defined in the <head> tags.
-
-
3
Type the following code:
<!--[if IE 6]>
<![endif]-->
Because this block of code begins and ends the same way as a regular HTML comment, most browsers will ignore everything between the "<!--" and "-->" indicators. Internet Explorer, however, is designed to recognize this syntax as a "conditional comment"--a special instruction only for IE.
-
4
Add a <link> tag between the opening and closing tags of the conditional comment, if you plan to use a separate style sheet. For example:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6style.css">
<![endif]-->Replace "ie6style.css" with whatever name you want your special IE6 style sheet to have.
-
5
Add a <style> tag between the opening and closing tags of the conditional comment, if you want to define the IE6 styles internally. For example:
<!--[if IE 6]>
<style type="text/css"></style>
<![endif]--> -
6
Create the IE6-specific style sheet, either in the separate CSS file named in Step 4 or between the <style> tags you added in Step 5. Your IE6 sheet needs to include only those styles that must be different to render correctly in IE6.
-
7
Test your page, in IE6 and a standards-compliant browser, to make sure it is rendering properly.
-
1
Tips & Warnings
The [if IE 6] condition can specify other versions of Internet Explorer, or all of them. Using [if IE 5.5] would apply the new styles only to Internet Explorer 5.5 (if anyone's still running it!), while [if IE], with no number at all, would apply them to all versions. Also available are the operators "lt," "lte," "gt" and "gte," which stand for, respectively, "less than," "less than or equal to," "greater than" and "greater than or equal to." Thus [if lte IE 6] would apply to all versions of IE up to and including 6.
