I have three stylesheets; one for IE7, one for IE8 and one for IE9+ / Firefox / Chrome.
I want to use conditional statements to link each of these to my document. I have written these statements:
<!--[if IE 8]>
<link type="text/css" href="ie8.css" rel="stylesheet"/>
<![endif]-->
<!--[if IE 7]>
<link type="text/css" href="ie7.css" rel="stylesheet"/>
<![endif]-->
<!--[if ?????]>
<link type="text/css" href="style.css" rel="stylesheet"/>
<![endif]-->
I am unsure of what to write in the if statement of the final conditional. I need something like:
<!--[if IE 9+ | !IE>
Which would mean IF IE9+ or NOT IE.
Is this achievable using conditionals?
Found the answer:
<!--[if IE 8]>
// ie 8 stuff
<![endif]-->
<!--[if IE 7]>
// ie 7 stuff
<![endif]-->
<!--[if !(IE)]><!--> i am not ie <!--<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
gt means "greater than", gte means "greater than or equal".
Edit
from IE Conditional operator: OR ... if is greater than ie9 or not IE
<!--[if gte IE 9 | !IE ]><!-->
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
Related
Is there a way that I can create an IE only element in CSS?
I need for the margin to be different in IE compared with other browsers. How can I do this within the actual stylesheet?
According to this (As #GOD said, found it with Google in 220ms. Google is your friend.)
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Along with what #Adrien Lacroix said, this is what you need
.element{
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
There is also these if you need them
IE6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
OR
html > body #div {
height: 300px;
}
There are at least two ways to do it.
IE-only stylesheet
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->
Javascript - check User Agent and apply necessary styles if IE found - best would be jQuery. Alternatively, you can try this.
When I tried to validate my website on CSS Validator it shows errors at universal selector "*" Parse error. Can somebody help on this? I used the twitter bootstraps css.
like following code
.row-fluid .span12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
}
.row-fluid .span11 {
width: 91.489361693%;
*width: 91.4361702036383%;
}
.row-fluid .span10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
}
.row-fluid .span9 {
width: 74.468085099%;
*width: 74.4148936096383%;
}
.row-fluid .span8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
}
The code uses the (in)famous Star Html Hack, which means using intentionally broken CSS code in order to deal with IE 6. Just ignore the error messages.
Hi now remove * of width
now if you are using IE than create a saparate CSS file and link to your document
as like this
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Link
I am using three conditional CSS files in my site, one for ie7, one for ie8 and one for IE only. IE7 and 8 are parsing properly when I parse the skin but for some reason, IE only conditional does not want to parse correctly, leaving this when the browser renders
<!--[if]> <![endif]-->
If however, I add that conditional statement directly to the parsed ascx page, the conditional works properly.
Here are the three conditional statements:
<!--[if IE]>
<link href="/portals/0/skins/sunmedia2011/css/97iefixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="/portals/0/skins/sunmedia2011/css/98ie7fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="/portals/0/skins/sunmedia2011/css/99ie8fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
Any thoughts?
Thanks!
I know this is old but could be helpful to someone:
<!--[if IE]>
<link href="<%= SkinPath %>css/97iefixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="<%= SkinPath %>css/98ie7fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="<%= SkinPath %>css/99ie8fixes.css" rel="stylesheet"
type="text/css">
<![endif]-->
How can I make a specific CSS stylesheet for Internet Explorer 8?
I mean, how can I load it only if the browser is IE8? (And not IE7 and IE6)
use this
<!--[if IE 8]>
<link href="/stylesheets/iestyle8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
http://www.quirksmode.org/css/condcom.html
You can use the following:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" media="screen" />
<![endif]-->
If I want to add padding based on the browser the user is viewing the page in, is there a way in CSS that I can do something like:
if IE do
padding:5px;
else if not IE do
padding 10px;
Here is a great reference: Quirksmode.org Conditional Comments.
Although the control structure is in the markup and not the CSS, it accomplishes your goal and is usually considered the best practice when serving browser-specific stylesheets.
The best-practice way is to have a single stylesheet for IE-only fixes, like so:
<link rel="stylesheet" href="styles.css" media="screen" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie-styles.css" media="screen" type="text/css" />
<![endif]-->
Then just override specific problem-causing styles in the ie-styles.css file.
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
For complete reference on the topic, Chris Coyier: How To Create an IE-Only Stylesheet
Although the IE conditional can be used only in html and not in the CSS, you can use the following in your CSS files for your quick-and-short tests/hacks.
p {
/* all browsers */
background-color: red;
/* for IE7 and below - append a * before the property */
*background-color: blue;
/* for IE6 and below - append a _ before the property */
_background-color: green;
}
While you can use this for your quick and short requirements, I think, you should follow the suggestion by Mark Hurd given above for production-level heavy codes.
Here's a cleaner way to target IE 10+ in CSS only
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
(Source: Phil Newcomer)
If you don't mind ugliness in your code, you can use something like the Holly hack:
div { padding:5px; }
* html div { padding:10px; }
There's a neat CSS Zen Garden example that does this to present two distinct designs, but I don't recall its name.