USING CONDITIONAL CLASSES/STYLESHEETS for IE

Viewing 1 post (of 1 total)

Author

Posts
TomC Moderator

TomC
Join date:
October 2014
Posts:
14077
Downloads:
58
Uploads:
137

Thanks:

948

Thanked:

3155 times in 2495 posts
July 15, 2013 at 6:16 pm #188969
Often times you may run across a particular site design issue that is not displaying correctly within our friend, Internet Explorer (IE). As much as many of us would like to ignore IE altogether, the fact of the matter is that a great percentage of the web browsing world still uses Internet Explorer as their primary web browser … with some still using versions older than IE8

If you follow some basic CSS coding principles, then you might very well need no hacks or workarounds for IE7 and IE8. Nonetheless, many beginners may need ways to target IE7 and/or IE8. Here I outline the best methods for doing so.

The best method, by far, is the CONDITIONAL CLASSES technique. Here’s how you do it:

    <html> 

This uses conditional comments to target certain versions of Internet Explorer, and the <html> element receives a custom class name for different versions of IE, and no class name when the browser is not IE.

Then in your CSS, you would target IE7 or IE8 like this:

.element { margin-bottom: 20px; }
.ie7 .element { margin-bottom: 10px; }
.ie8 .element { margin-bottom: 15px; }

Every browser will have a bottom margin of 20px on the element in question, but IE7 and IE8 will have a bottom margin of 10px and 15px respectively.

It’s important to note here that although targeting IE is necessary at times, it is strongly suggested that you try to find a better way to fix any browser differences, and avoid using conditional classes or any of the hacks mentioned below, if at all possible. Sometimes you just need to rethink your CSS and possibly your markup, and you can avoid this extra code from the start.

Another method is to use CONDITIONAL STYLESHEETS

Why use conditional stylesheets?? . . .
- You’ve got IE related problems that need to be fixed
- Keeps your code hack-free and valid
- Keeps your main stylesheet clean
- Perfectly acceptable technique, sanctioned by Microsoft
These conditional tags don’t have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.

CONDITIONAL STYLESHEET CODE:
This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that’s just regular ol’ HTML comments. Then between the brackets, “IF” and “IE” should be fairly obvious. The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt means “greater than”, gte means “greater than or equal”, lt means “less than”, lte means “less than or equal.”

Target ALL VERSIONS of IE:



Target everything EXCEPT IE:

 <link rel="stylesheet" type="text/css" href="not-ie.css" /> 

Target IE 7 ONLY:



Target IE 6 ONLY:



Target IE 5 ONLY:



Target IE 5.5 ONLY:



Target IE 6 and LOWER:




Target IE 7 and LOWER:




Target IE 8 and LOWER:




Target IE 6 and HIGHER:




Target IE 7 and HIGHER:




Target IE 8 and HIGHER:



2 users say Thank You to TomC for this useful post
1. phong nam
2. s4reea
Author

Posts

Viewing 1 post (of 1 total)

This topic contains 1 reply, has 1 voice, and was last updated by TomC 11 years, 4 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Quick Navigation

Site navigation

USING CONDITIONAL CLASSES/STYLESHEETS for IE

TomC

Important Notice :

Jump to forum

Categories