I know that you can use an IE conditional comment inside HTML:
<!--[if IE]>
<link href="ieOnlyStylesheet.css" />
<![endif]-->
But what if I want to target only IE in a stylesheet, setting up a css rule for a specific element inside the html. For example, you can use this Chrome/Safari hack inside the css file as css code...
#media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass{
background: #fff;
background:rgba(255,0,255,0.7);
}
}
But using the IE hack inside the CSS stylesheet like this:
<!--[if IE]>
.myClass{
background: #fff;
background:rgba(255,0,255,0.7);
}
<![endif]-->
does not work. What do I use inside a stylesheet to target IE only?
Conditional comments do not work within stylesheets. Instead, you can use conditional comments in your HTML to apply different CSS classes or IDs to elements that you can then target with CSS.
For instance:
<!--[if IE]>
<div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="wrapper">
<![endif]-->
Also, there are tools such as Modernizr that do feature detection in a very similar way (by adding classes to the <html> element). You can use it to progressively enhance your design/script for newer browsers while still supporting older browsers.
It can be easier than what Derek Hunziker said:
Simply include this code as it is:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
Then you can target it easily, for example if you want to target IE 8 and lower you write:
.lt-ie9 body{css rule here;}
and you are done!
Cheers
Conditional comments work in Internet Explorer 9 and below, but are ignored by Internet Explorer 10 and up. You can use Internet Explorer specific CSS rules in your stylesheet. Hacks? Yeah, but not really dirty hacks imho.
To target Internet Explorer 8, 9, 10 and 11, you can use:
#media screen\0 {…}
To target Internet Explorer 6 and 7, you can use:
#media screen\9 {…}
Source: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
It worked for me. I have not had time to test it in different browsers. If you can confirm it works (or not), please add some comments (with the browser you tested it in.)
Example:
/* Default CSS rule for all browsers */
span.icon {
width: 16px;
display: inline-block;
margin-right: -16px;
}
/* Style rules in the media rules below will only be applied in Internet Explorer */
/* Other browsers will ignore them. */
#media screen\0, #media screen\9 {
span.icon {
margin-right: 8px;
}
}
--- Nothing to see here. Only CSS rules ---
A complete example:
span.icon {
width: 16px;
display: inline-block;
margin-right: -16px;
}
/* Style rules in the media rules below will only be applied in Internet Explorer, other browsers will ignore them. */
#media screen\0, #media screen\9 {
/* Style rules here will only be applied in Internet Explorer, other browsers will ignore them. */
span.icon {
margin-right: 8px;
}
}
/* -----------------------------------------------------------------------------*/
a.icon {
-webkit-padding-start: 1.5em;
text-decoration: none;
}
a.icon:hover {
text-decoration: underline;
}
span.icon_file {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
}
span.icon_dir {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
}
span.icon_up {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
}
.nowrap {
white-space: nowrap ;
}
div.fileList {
padding: 20px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table.FileList {
border-collapse: collapse;
margin: 20px;
}
table.FileList th {
text-align: left;
font-weight: bold;
}
table.FileList td {
border: 0px solid #000;
}
table.FileList tr.heading{
border-bottom: 1px solid black;
}
<table class="FileList">
<tr class="heading"><th>Archive</th></tr>
<tr><td> </td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2018">2018</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2017">2017</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2016">2016</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2015</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2014</a></span></td></tr>
</table>
You can't use IE conditional comments but you can use hacks. This page of CSS hacks explains IE hacks you can use (and more).
IE stylesheet hacks
.Class {
color: green; /* standard */
color: green\9; /* IE 8 and below */
*color: green; /* IE 7 and below */
color: green !ie; /* IE 7 and below */
_color: green; /* IE 6 */
}
What you want to do is style everything in your stylesheet as you normally would for any other browser. AFTER you import the normal stylesheet into your page you will then import an IE-specific stylesheet with the regular <!--[if IE]> conditional statement.
Following this method imports the styles for all browsers and then uses your IE-specific styles to override those that are not compatible, don't render correctly, or need to be adjusted for use in IE.
Related
I have an element that currently has margin-left: -110px of course, this works with my design in all browsers except IE. With IE I need to make it margin-left: 10px
Normally, I would do my IE hacks by adding \9;, such as:
margin-left: 10px\9;
but it doesnt seem to work with margins. Does anyone know a way to acheive this? Many thanks!
<div id="nav">
<ul>
<li id="newstab">News</li>
<li id="offerstab">Offers</li>
<li id="specialsstab">Specials</li>
</ul>
</div>
#nav {
position:absolute;
margin-left: -110px;
margin-left: 10px\9;
margin-top: 160px;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
white-space:nowrap;
}
If you really need to, you can use an IE conditional block:
<link href="style.css" rel="stylesheet" />
<!--[if lt IE 10]>
<style type="text/css">
.thing {
margin-left: 10px;
}
</style>
<![endif]-->
Found it was
writing-mode:tb-rl;
IE didnt like.
This site was useful:
http://www.useragentman.com/IETransformsTranslator/
.class {
text-align:right;
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
margin-left: 30px
}
margin-left: 90px;
}
You can write the specific css for IE, then overwrite other css for other browser.
You can use like this
<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
Then in your CSS, you would target IE7, IE8 or IE9 like this:
.element {
margin-left: 20px;
}
.ie7 .element {
margin-left: 10px;
}
.ie8 .element {
margin-left: 15px;
}
.ie9 .element {
margin-left: 10px;
}
Now every browser will have a left margin of 20px on the element in question, but IE7, IE8 and IE0 will have a left margin of 10px, 15px and 10px respectively.
Why are you using margin-left, when you are also using position:absolute?
You won't ever gain the desired effect of a margin when using position absolute (but that is not the actual issue here).
When using position absolute, you should always define the elements default datum point consisting of at least a top/bottom and left/right position - in your case, top:0; left:110px; (this is assuming the absolute positioned element is within a position:relative; parent container).
You are allowing the browsers to assume what you want to display, rather than actually defining and telling the browsers what you want to display - You should be doing this without fail on everything you build in CSS.
In not strictly defining where you want an element to sit using absolute positioning, you are asking for trouble in IE (especially lt IE9).
I want to css sprite (sprite image total width:45px and total height:15px consists of three image ) but there is a problem in IE9/8/7. link and hover work but when click the button (active) sprite image slipping to left 1px. issue for only IE 9/8/7.How can I fix this?
CSS:
body{
margin:0;
padding:0;
}
.button{
background:url(sprite-image.png) no-repeat 0 0;
width:15px;
height:15px;
cursor:pointer;
}
.button:hover{
background:url(sprite-image.png) no-repeat -15px 0;
}
.button:active{
background:url(sprite-image.png) no-repeat -30px 0;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
HTML:
<body>
<div class="cont">
<div class="button"> </div>
</div>
</body>
"link" and "hover" and "active" FF,Chrome,Safari,Opera like this;
but IE 9/8/7 active look like this;
I concretized above images to make it look better . My sprite image;
Why not use IE-conditional comments;
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
And then write eg CSS-rules like .lt-ie9 .someclass{}to target a IE-version. I use them to fix some IE-specific css-stuff. No dirty hacks, no hastle just css. Did you check with eg Firebug Lite what happens?! outline: 0 none?
Add a Internet explorer specific stylesheet to the <head></head> section.
<!--[if lt IE 9]>
<link rel="stylesheet type="text/css" href="/css/ie.css" />
<![endif]-->
and in ie.css do something like:
.button:active{
background:url(sprite-image.png) no-repeat -29px 0 !important;
}
(There's Always an issue with ie , phew !)
I created a fake sprite using your graphic to see what you are seeing but looking good in my fiddle in all IE 7-9 (note i just change positioning and made it construsive (less):
http://jsfiddle.net/Riskbreaker/Rr8p2/
body{
margin:0;
padding:0;
}
.button{
background:url(images/sprite.png) no-repeat 0 0;
width:14px;
height:15px;
cursor:pointer;
}
.button:hover{
background-position:0px -27px;
}
.button:active{
background-position:0px -27px;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
Remember the positioning I made up so you can adjust. I never had the active IE issue before...but let me know what you are seeing....if the issue persist and you don't want another file then do this:
IE7: *.button:active{background-position:0px -28px;} (or whatever the correct position is )...
IE8: .button:active{background-position:0px -28px\9;}.........
IE9....not sure your latest but it should not have any issues (latest)
I have faced similar issues with IE8 before but IE9 worked fine in my case (not sure about IE7 but it must be like IE8 for this thing).
It can be resolved/improved by one of these 2 approaches:
1) Modify the image (maybe in resolution, color combination etc.) and try if it works. Why this might work? Because in your example, IE appears trying to do some image manipulations "intelligently" which unfortunately go wrong at times (especially for small images/pixel perfect cases) and you can just hope that it doesn't fail badly for your new images.
2) Use background-position accuracy of 0.5px units.
Note "background-position: -15.5px 0;" in the following code. This solution will reduce your frustration by at least 50% :-) I am afraid that you might need to provide IE specific CSS for this solution but that should be fine ... You can add the browser identifier class name on tag using JavaScript or with technique mentioned # http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ and then use those class names when you write browser specific CSS.
The solution:
.button {
background:url(images/sprite.png) no-repeat 0 0;
width: 15px;
height: 15px;
cursor:pointer;
}
.button:hover {
background-position: -15.5px 0;
}
.button:active {
background-position: -30px 0;
}
.cont {
width: 200px;
height: 200px;
float: left;
margin: 50px 0 0 100px;
}
You can use below trick which will help to give manual value
For IE7 (underscore before the value)
.button:hover {
background-position: _-15.5px 0;
}
Or
IE-7 & IE-8(need to add\9)
.button:hover {
background-position: -15.5px\9;
}
For IE8only (\0/)
*+.button:hover {
background-position: -15.5px\0/;
}
Try this change in css:
.button{
background: url(sprite-image.png) no-repeat left 0;
width: 15px;
height: 15px;
cursor: pointer;
}
.button:hover{
background: url(sprite-image.png) no-repeat center 0;
}
.button:active{
background: url(sprite-image.png) no-repeat right 0;
}
In my css code i have tose hack that i want to affect IE6/7
#topmenu li a.activa,
#topmenu li a.activa:hover{
*background: url(../nImg/comunHomeSprite.png) no-repeat;
*background-position: right -2169px;
*float:left;
*margin:0;
*padding:0;
*margin-left:10px;
}
Is there a simple way to convert them into IE8 also??
If you must use hacks, then read this: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
But note that CSS hacks are considered evil.
Conditional comments are a good alternative. They are easy to use, and guaranteed to work properly.
You can't put conditional comments directly into a stylesheet, but what you can do is define a class in your <body> tag using conditional comments, which you can then reference in the CSS:
Write your HTML <body> tag like this:
<!--[if IE 6]> <body class="ie6 ltie7 ltie8 ltie9"> <![endif]-->
<!--[if IE 7]> <body class="ie7 ltie8 ltie9"> <![endif]-->
<!--[if IE 8]> <body class="ie8 ltie9"> <![endif]-->
<!--[if IE 9]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
Then in your CSS, you can reference the relevant IE class in your selectors, and you'll have completely valid CSS code:
#topmenu li a.activa:hover {
/*normal styles here*/
}
.ie8 #topmenu li a.activa:hover {
/*IE8-specific styles here*/
}
Hope that helps.
Found this
selector {
prop: value; /* real browsers */
_prop: value; /* ie6 */
*prop: value; /* ie6 ie7 */
prop: value\9; /* ie8 */
}
don't know if this addresses IE9
/* IE8 */ #media \0screen { #topmenu li a.activa, #media \0screen #topmenu li a.activa:hover {
background: url(../nImg/comunHomeSprite.png) no-repeat;
background-position: right -2169px;
float:left;
margin:0;
padding:0;
margin-left:10px;
} }
I prefer this way personally as the attributes are still standard CSS and you need only change them once instead of however many different hacks you have. It can get a bit unwieldy otherwise.
I have a stylesheet that contains 10 selector definitions. When I view my website in IE and Chrome (I'm not including FF because it renders exactly like the way it does in Chrome), nine of the ten selector definitions work consistently across all browsers.
The one that doesn't work is defined as such:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
As you can see, there are only two values that are necessary for IE. So I did some research on conditional CSS. I have now taken my style sheet and create a duplicate with the two additional entries for IE.
At the top of my document, I now have the following:
<!--[if IE]>
<link href="Styles/custom.css" rel="stylesheet" type="text/css" />
<![endif]-->
<![if !IE]>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<![endif]>
which is working, but can't I do the conditional statement at the selector level?
I also tried this in the CSS document which also didn't work.
[if IE] a.dp-choose-date {
/* definitions here */
}
Does anyone have any suggestions?
One way to do this is:
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" />
Notice than I do not have a conditional around the first style sheet.
Within the second style sheet just define the tag as:
a.dp-choose-date {
position: relative; /* This is only needed for IE */
top: -25px; /* This is only needed for IE */
}
Due to the way style sheets work, the browser will combine and apply both definitions.
You can make things easier on yourself by adding classes to target IE, and a nice way to do this is to wrap your opening html tag in conditionals like so:
<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
This allows you to prefix your IE only selector with the version of IE you want to target:
a.dp-choose-date
{
/* border: 1px solid red; */
float: right;
width: 25px;
height: 25px;
padding-top: 5px;
padding-left: 16px;
margin: 0px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(../images/calendar3.png) no-repeat;
}
.ie6 a.dp-choose-date
{
position: relative;
top: -25px;
}
Using IE's if conditionals at the HTML level is probably the best way to fix kinks that IE (usually < 9) has. Conditional comments do not exist at the CSS level. You can also (if you wish) use CSS hacks, but that probably isn't the best solution, as later versions of IE may not necessarily allow those hacks, but may still have the same CSS issues.
By the way, your second if conditional should be written as the following for validation purposes:
<!--[if !IE]>-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
The easiest way to implement this logic:
[if IE] a.dp-choose-date {
/* definitions here */
}
is to use IE's conditional comments to write out unique body tags:
http://www.positioniseverything.net/articles/cc-plus.html
So you can end up with something like this:
<body class="ie7">
Then, in your CSS, when you need to over-ride one style, you can do this:
.myStyle {--style for good browsers--}
.ie7 .myStyle {over-ride for IE7}
The benefits of this:
only one CSS file needs to be loaded (saving server requests)
your CSS remains valid (no ugly CSS hacks)
your over-ride styles stay with your good styles, so much easier to maintain
In a CSS file, is there a way to give a specific height for a DIV that only applies to Internet Explorer ONLY, and at the same time, give that same DIV another height that applies to all browsers except for Internet Explorer?
You can create an IE-specific stylesheet and use IE Conditional statements.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
This way, you basically have two stylesheets; one for IE and other for rest of the standard-compliant browsers.
Hacks could have been used such as:
_height:500px;
*height:500px;
But that is not recommended.
See Also:
How To Create an IE-Only Stylesheet
I have used the following and it worked in IE8. Put the following code within tag.
You can watch the online version from here, http://nazmulweb.com/site5/demo/iecss/
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 1px solid green;
}
</style>
<!--[if IE]>
<style type="text/css">
#tgtDiv
{
height: 300px;
width: 400px;
border: 5px solid red;
}
</style>
<![endif]-->
try this
<style>
#mydiv { height:800px; }
</style>
<!--[if IE]>
<style>
#mydiv { height:500px; }
</style>
<![endif]-->
Create 2 css files, one for IE and one for the other browsers
Load the css file according to the browser like described here