i'm trying to create border radius for some divs and want them to work on IE too so i'm tryin to use CSS3 PIE. I want to target browsers less then IE9 but it's not working at all
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="../assets/css/ie.css"/>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../assets/css/main.css"/>
the last one is the main stylesheet but when i open ie.css and save any style it doesn't work at all. The page loads without any stylesheet On IE as it's not attached to the html page
Any solution ?
You need to have the ie.css overwriting the main.css
try
<link rel="stylesheet" type="text/css" href="../assets/css/main.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="../assets/css/ie.css"/>
<![endif]-->
Related
How to write the sintax on the css property like:
.example{
/*all the browsers except IE*/
font-size:100%;
/*that's on all the IE syntax I need to add like a condition*/
font-size:200%
}
That's a simple code I know, that's only to test it, but not on the html, on each property in a class, id or tag on the css.
In ie6 it's:
#test{ _color: blue}
in ie6 and ie7:
#test{ *color: blue}
ie6, ie7 and ie8:
#test{ *color: blue\9}
But how to difference between all IE and the other browsers?
Anyone can help?
Use conditional stylesheets
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target ALL VERSIONS of IE less than IE10
<!--[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]-->
Since IE10 ignores conditional comments you can try this solution.
Learn more about it here.
i have tried a very simple code, dont know why it is not working , may be a small mistake but i gave up, so please help
my ie version is 8.
here is my code
<!DOCTYPE html>
<head>
<!--[if gte IE 8]>
<link type="text/css" rel="stylesheet" href="ie.css" />
<![endif]-->
</head>
<body>
<div class="u">
xyz
</div>
<style scoped>
.u{
background:red;
}
</style>
</body>
</html>
ie.css
.u{background:green;}
The issue here is that you are redeclaring your css.
In the above code, you are specifying:
For ie: set background green.
For all: set background red.
Place your ie css below the generic css for it to take precedence.
You should do it like this:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You might need to apply the !important attribute to your over-riding class definition like this:
.u{background:green!important;}
This will force it to take precedence over the normal version. A better solution might be to make it more specific too so that it is used when present (when being viewed in IE9+):
body div.u{background:green;}
I am building a separate stylesheet for IE. I am using this code between
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/iestyle.css" />
![endif]-->
</head>
The problem is, this part is being printed to the screen on the page in IE:
![endif]-->
What am I doing wrong?
you need to start the closing tag. use this
<![endif]-->
Why I am not able to apply an css that is for IE browser only,
I am trying to do it as below with in-page css block.
<style type="text/css">
<!--[if IE]>
body a {font-size:12px;text-decoration:none;}
<![endif]-->
<style>
Reference link
The way to do it is around a css file reference,
Example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You might be able to do this too:
<!--[if IE]>
<style type="text/css">
body a {font-size:12px;text-decoration:none;}
<style>
<![endif]-->
But it has to be in the html page and not in a css file.
because conditional comments can't be in the style tag. Everything within <style> must be css. Try to wrap the style tag with the conditional comment.
Your code: http://jsbin.com/otidal/edit#preview
Correct code: http://jsbin.com/otidal/2/edit#preview
As always, there is something that works in FF but does not work correctly in IE. So my question is the following: is there a way to insert class properties in css that are recognized only by Internet Explorer 8.
.style1, .style2 .style3 {
height: 20px;
}
I want the height property to be visible only for Internet Explorer (I use version 8) because the height appears properly in FF, but if I would insert the height: 20px for both browsers then in FF it would be too much, so I only need this in IE.
Is there a way to do it?
As pointed out by others, conditional stylesheets are commonly used to target specific versions of IE.
I have recently moved over to a more efficient and tidy way of managing conditional styles which cuts down on the number of separate stylesheets and allows you to put your conditional styles into your main stylesheet. For example, you could achieve what you are trying to do like so:
In your web page(s):
<!--[if lt IE 7]> <body class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <body class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <body class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <body class="ie"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
In your stylesheet:
.ie8 .style1, .ie8 .style2 .i8 .style3 {
height: 20px;
}
Paul Irish and others have plenty documentation and test cases for this method. Here's a good starting point: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Not directly in the css, no. But you can use conditional comments in your html page to load css stylesheets only if the browser is IE, or a specific version of IE:
<!--[if ie]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
You can also target this to specific versions of IE, with:
IE 8 only
<!--[if ie 8]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions greater than IE 7
<!--[if gt ie 7]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions greater than, or equal to, IE 7
<!--[if gte ie 7]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions less than 8
<!--[if lt ie 8]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
IE versions less than, or equal to, 8
<!--[if lte ie]>
<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css" />
<![end if]-->
This is what IE Conditional Comments are there for :)
To make some style work only in IE, you would do:
<!--[if IE]>
<style type="text/css">
/* styles for the IE */
</style>
<![endif]-->
Or you can create a seperate stylesheet for IE and import like this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iecss.css" />
<![endif]-->
Conditional comments only work in
Explorer on Windows, and are thus
excellently suited to give special
instructions meant only for Explorer
on Windows. They are supported from
Explorer 5 onwards, and it is even
possible to distinguish between 5.0,
5.5 and 6.0.
More inforamtion
Are you looking for this?
How to create IE-Only StyleSheet