views:

76

answers:

5

Possible Duplicate:
How do I do IE conditionals in CSS?

How can I apply the rules below to IE only?

.abc {

float:left;
height:0;
margin:0 10px;
width:0;

/*Apply these rules for IE only*/
position:absolute;
left:30;
top:-10;
/*Apply these rules for IE only*/
}
+4  A: 

You are looking for conditional comments.

<!--[if IE]>
<style type="text/css">
  IE specific CSS rules go here
</style>
<![endif]-->
Pekka
A: 

http://html5boilerplate.com/ will show you how to solve this and many other things.

Ian
People could download the zip file, open it up, dig though the source, find the bit about conditionals, and then copy/paste the link to read the explanation (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) , which assumes a basic understanding of conditional comments in the first place, but its hardly a convenient way of getting an answer to the posed question.
David Dorward
A: 

A good way to avoid loading multiple CSS files or to have inline CSS is to hand a class to the body tag depending on the version of Internet Explorer. If you only need general IE hacks, you can do something like this, but it can be extended to be version specific:

<!--[if IE ]><body class="ie"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->

Now in your css code, you can simply do:

.ie .abc {
  position:absolute;
  left:30;
  top:-10;
}

This also keeps your CSS files valid, as you do not have to use dirty (and invalid) CSS hacks.

DASPRiD
A: 

A fast approach is to use the following according to ie that you want to focus (check the comments), inside your css files (where margin-top, set whatever css attribute you like):

margin-top: 10px\9; /*It will apply to all ie from 8 and below */
*margin-top: 10px; /*It will apply to ie 7 and below */
_margin-top: 10px; /*It will apply to ie 6 and below*/

A better approach would be to check user agent or a conditional if, in order to avoid the loading of unnecessary CSS in other browsers.

JohnDel
A: 

I prefer using a separate file for ie rules, as described earlier.

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

And inside it you can set up rules for different versions of ie using this:

.abc {...} /* ALL MSIE */
*html *.abc {...} /* MSIE 6 */
*:first-child+html .abc {...} /* MSIE 7 */
angryobject