If you are a web developer you know how painful is to write a webpage that behaves same in all the web browsers. Generally the webpage created for Firefox behaves pretty much the same in Chrome, but Internet Explorer has its own problems. Whether it be problem with Multiple Selection in IE or the AJAX Cache Problem, Internet Explorer has always been a browser which needs special attention. Thus, generally how we deal with IE is we create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.
IE Only
Here is the basic technique for an IE-Only stylesheet:<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
Code language: HTML, XML (xml)
Non-IE Only
The opposite technique, targeting only NON-IE browsers:<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->
Code language: HTML, XML (xml)
If you need to get include stylesheet for specific versions of IE, here are a few examples.IE 7 ONLY
<!--[if IE 7]>
<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->
Code language: HTML, XML (xml)
IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->
Code language: HTML, XML (xml)
IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->
Code language: HTML, XML (xml)
IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->
Code language: HTML, XML (xml)
VERSION OF IE VERSION 6 OR LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->
Code language: HTML, XML (xml)
I preffer using cssbrowserselector js library solution: http://rafael.adm.br/css_browser_selector/
CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.
I find this solution easier then conditional importing the css files.
This is also called a conditional comment:
http://www.fettesps.com/conditional-comments/
Hi viral
Nice blog
i have a question
i used
i dont have “IE-6-SPECIFIC.css physically.Where is that css?
With the same code above ,it doesnot work for IE.Why is it so
also i tried with
on ie 8 &9 .It doesn’t work as well.
On clicking Sports menu…sub menu does not open instead language menu goes down..
on clicking sports again technology menu comes up again.
i’m clueless.
Plz help me in getting it right..
Thanx
my website is totally animated with java script but not runs in internet explorer…
should you please help to solve them.
I have made 2 page one is a.html and another one is b.css,
In a.html i have put this code
aaaa
and in b.css
.box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
not working in any version of IE
plz suggest me what mistake i m doing
Thanks Viral for giving thi valuable Information About IE 8.
Good Working Css Style