Conditional CSS For IE ( Internet Explorer )

Why Do We Need Conditional CSS ?

Internet Explorer, the most used browser world wide. But as a developer we all are well know about the styling issues with this browser. Sometimes we got some CSS that may be working perfectly in Mozilla, Chrome and Safari but not in Internet Explorer.

At that very moment we need to check the browser and apply the styles accordingly. Here I will state a simple way to solve this issue using conditional css tricks. One thing this CSS trick will only work for IE (Internet Explorer)

How to Add Conditional CSS for Internet Explorer ?

If the styling issue is only with the IE then I got a very special and easy solution for this. That is called Conditional CSS. If the issue is with all other browsers then you may need to check the browser using JavaScript. Check my article for this. ( Check Browser in JavaScript )

Here is the conditional CSS. 

     
 <!--[if IE]>
 According to the conditional comment this is IE<br />
 <![endif]-->
 <!--[if IE 6]>
 According to the conditional comment this is IE 6<br />
 <![endif]-->
 <!--[if IE 7]>
 According to the conditional comment this is IE 7<br />
 <![endif]-->
 <!--[if IE 8]>
 According to the conditional comment this is IE 8<br />
 <![endif]-->
 <!--[if IE 9]>
 According to the conditional comment this is IE 9<br />
 <![endif]-->
 <!--[if gte IE 8]>
 According to the conditional comment this is IE 8 or higher<br />
 <![endif]-->
 <!--[if lt IE 9]>
 According to the conditional comment this is IE lower than 9<br />
 <![endif]-->
 <!--[if lte IE 7]>
 According to the conditional comment this is IE lower or equal to 7<br />
 <![endif]-->
 <!--[if gt IE 6]>
 According to the conditional comment this is IE greater than 6<br />
 <![endif]-->
 <!--[if !IE]> -->
 According to the conditional comment this is not IE<br />
 <!-- <![endif]-->


The above trick is the conditional css trick. Let me explain a bit about this.

<!--[if IE]> this tag will check if the browser is IE or not and the block inside the start and end tag will be executed only for IE. You can also check for the version of the IE browser like above. and put your CSS, Script, HTML or whatever you want to show in IE.


     
  <!--[if IE]>
         Put your code block CSS/Script/HTML for IE 
  <![endif]-->



My problem was with some CSS in IE8 so I added the below block for IE8.

     
  <!--[if IE 8]>
         <style type="text/css">
                   h1, h4, h5
                     {
                       margin: 0px;
                       padding-top: 5px;
                       padding-bottom: 5px;
                     }
               </style>
 <![endif]-->



The above conditional css will be applied for the h1, h4, and h5 tags when the browser is IE 8 otherwise not.

I hope this will be a bit helpful for you, when you face problems regarding cross browser compatibility of designs in IE.

Happy Coding...

1 comment:

  1. Here is a css hack tricks for various browsers, that may help you for something.



    /***** Selector Hacks ******/

    /* IE6 and below */
    * html #uno { color: red }

    /* IE7 */
    *:first-child+html #dos { color: red }

    /* IE7, FF, Saf, Opera */
    html>body #tres { color: red }

    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }

    /* Opera 9.27 and below, safari 2 */
    html:first-child #cinco { color: red }

    /* Safari 2-3 */
    html[xmlns*=""] body:last-child #seis { color: red }

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:nth-of-type(1) #siete { color: red }

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:first-of-type #ocho { color: red }

    /* saf3+, chrome1+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #diez { color: red }
    }

    /* iPhone / mobile webkit */
    @media screen and (max-device-width: 480px) {
    #veintiseis { color: red }
    }


    /* Safari 2 - 3.1 */
    html[xmlns*=""]:root #trece { color: red }

    /* Safari 2 - 3.1, Opera 9.25 */
    *|html[xmlns*=""] #catorce { color: red }

    /* Everything but IE6-8 */
    :root *> #quince { color: red }

    /* IE7 */
    *+html #dieciocho { color: red }

    /* Firefox only. 1+ */
    #veinticuatro, x:-moz-any-link { color: red }

    /* Firefox 3.0+ */
    #veinticinco, x:-moz-any-link, x:default { color: red }



    /***** Attribute Hacks ******/

    /* IE6 */
    #once { _color: blue }

    /* IE6, IE7 */
    #doce { *color: blue; /* or #color: blue */ }

    /* Everything but IE6 */
    #diecisiete { color/**/: blue }

    /* IE6, IE7, IE8 */
    #diecinueve { color: blue\9; }

    /* IE7, IE8 */
    #veinte { color/*\**/: blue\9; }

    /* IE6, IE7 -- acts as an !important */
    #veintesiete { color: blue !ie; } /* string after ! can be anything */

    ReplyDelete