hi a i am triyng to using conditional css like this in my style sheet
div.box {
width: 400px;
[if IE 6] width: 600px;
padding: 0 100px;
}
i want to set a different width to my div in ie6 , so i am trying this code and not working , how can i set a different width in ie6
also i tried this in my style sheet
[if IE]
div.box {
width: 600px;
padding: 0 100px;
}
[endif]
Conditional comments are for use inside HTML documents, not inside CSS files. IE's HTML parser will interpret the rule inside the comment - as far as I know, there's no equivalent logic in its CSS parser.
The following code will work:
<!--[if IE 6]>
<style type="text/css">
div.box {
width: 600px;
padding: 0 100px;
}
</style>
<![endif]-->
In most cases, it's better to use the conditional comment to include an external stylesheet, rather than just wrapping a block of inline styles, like so:
<!--[if IE 6]>
<link rel="stylesheet" href="/css/IEpatches.css" type="text/css" media="screen" charset="utf-8"/>
<![endif]-->
Edited to specify IE6 only as requested in the question.
The best way to do conditionals for ie6 is to add a conditional include in the head of the html page like this:
<!--[if IE 6]>
<link rel="stylesheet" href="[something like style/ie6.css goes here]" type="text/css">
<![endif]-->
and then just add your new widths as exceptions to elements in the ie6.css style sheet.
Have you tried?
<!--[if IE]>
// Your conditional CSS
<![endif]-->
I think that your formatting is wrong for your conditional statement.
Have you read the Conditional-CSS documentation? Specifically, do you run your CSS through the Conditional-CSS compiler? Because if you don't, you'll just send the CSS to the browser unchanged - there is no way Conditional-CSS can do its magic then.
As you probably have learned by now, conditional comments are parsed in the HTML output, not within the CSS file itself, unless you are using third party software.
Another way you can target IE within your CSS files without hacks:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
It's become common to use variations of this technique for IE, I believe it was made popular by HTML5 Boilerplate. You are basically using conditional comments to add a class to the <html> tag (or body tag if you wish) so you can target elements in your CSS files like so:
.ie6 #header {
/* some ie6 only styles here */
}
To me, this is more maintainable than using separate stylesheets, but suffers the very mild setback of other browsers reading (but not applying) the IE styles.
