Tutorials Palace: How to Apply Conditional Styling for Internet Explorer

Sunday, May 8, 2011

How to Apply Conditional Styling for Internet Explorer

Today in this tutorial we are going to teach you that how to apply conditional styling in Internet Explorer and what are some reasons to use them. First off conditional stylesheets can target certain versions of IE or hide certain things from it. It's a good way to work around the differences Internet Explorer uses in its browser. All this code goes somewhere within the <head></head> tags in your HTML f

The example below shows how to target ALL versions of IE.

<!--[if IE]>  
        <link type="text/css" rel="stylesheet" href="IE-only.css" />  
<![endif]-->

It is also possible to simply write the CSS for IE right in the conditional stylesheets.

<!--[if IE]>   
 
<style type="text/css">    
 
#div_outer { margin-left: 20px; }    
</style>      
 
<![endif]-->

Here's how to target all versions BEFORE IE 8. The "lt" stands for Less Than.

<!--[if lt IE 8]>  
        <link type="text/css" rel="stylesheet" href="IE_lessThan8.css" />  
<![endif]-->

Here's how to target all versions ABOVE IE 6. The "gt" stands for Greater Than.

<!--[if gt IE 6]>  
        <link type="text/css" rel="stylesheet" href="IE_greaterThan6.css" />  
<![endif]-->

Anyone with previos programming knowledge knows that an an exclamation point "!" means NOT. So to target everything EXCEPT Internet Explorer:


<!--[if !IE]><!-->  
        <link type="text/css" rel="stylesheet" href="noIE.css" />  
<!--<![endif]-->

Tutorials Palace