Target IE6, IE7 and IE8 in your CSS

Glenn Glenn's Blog 0 Comments

Target IE6, IE7 and IE8 in your CSS Target IE6, IE7 and IE8 in your CSS css tips

So you’ve created a site and it looks great in Safari, Google Chrome, Firefox and even the horrible Internet Explorer 8, but then you check it in Internet Explorer 6 & 7 and it looks terrible. Now you need to make some CSS tweaks to bring everything in line, but trying to do this universally across all browsers is neon impossible.

Conditional Comments

One way of resolving this is to use conditional comments to link to an ie.css style sheet like so:-

<!--[if IE]>
the link to your ie.css style sheet, css or script
<![endif]-->

Specific Syntax Examples

If you want to target Internet Explorer 7

<!--[if IE 7]>
the link to your ie.css style sheet, css or script
<![endif]-->

Specific Syntax Examples

If you want to target versions older than Internet Explorer 7

<!--[if lt IE 7]>
the link to your ie.css style sheet, css or script
<![endif]-->

If you want to target Internet Explorer 7 and older versions

<!--[if lte IE 7]>
the link to your ie.css style sheet, css or script
<![endif]-->

Only one extra character to target IE6 / IE7 in your CSS

If you don’t want to serve up a complete CSS, or even a CSS snippet and want to keep everything on a sinlge Style Sheet then you can use the following CSS attributes in IE6 & IE7 that involves adding only one extra character in your CSS.

#mydiv { color: #000000; /* shows in all browsers */ *color: #999; /* notice the * before the property - shows in IE7 and below */
 _color: #000000; /* notice the _ before the property - shows in IE6 and below */ }

In relation to IE8 there are to my knowledge no specific valid css attributes such as the above, but you can try the following ‘hack’:-

#mydiv { color/*\**/: #000000\9 }

Be careful through as E9 beta and PP apparently all prey to the /9 hack which means that if IE9 resolves the problems that we get in IE8 then we’re going to need an alternative method of accessing IE8.

So it’s the conditional comment route:-

<!--[if IE8]>
the link to your ie.css style sheet, css or script
<![endif]-->>

But if you have a way of just targeting IE8 and not pending IE9 then we would love to hear from you.

About the Author
Target IE6, IE7 and IE8 in your CSS Target IE6, IE7 and IE8 in your CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *