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
Related
I have the following setting and only want to have this setting for IE only.
Is there the way to do so
.login-space {
padding-right: 30px;margin-right: 20px;
}
Thanks
K
One solution is create a style sheet for only IE and put that selector in it and add the style sheet in head section like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
More detail 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;}
Can any one help me , please.
how to apply the height css property on ie9 just and do I can use conditional css inside css file?
You can't do conditional css in the css file, but you can give each version of IE its own class. Just put this at the top of the HTML file:
<!doctype html>
<!--[if !IE]> <html class="not-ie" lang="en"> <![endif]-->
<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
Now all you need to do in your css file to target ie9 is this:
.ie9 div.whatever {
height: some value;
}
I don't have a conditional CSS solution that can be done within the same CSS file. However, if you're not adverse to it, you could create a second CSS file specifically for IE9, and use conditional comments to apply the CSS. For example:
<link type="text/css" href="style.css" rel="stylesheet" />
<!--[if IE 9]>
<link type="text/css" href="style-ie9.css" rel="stylesheet" />
<![endif]-->
In this example, you would put whatever changes to height into "style-ie9.css". That stylesheet would only be applied when the browser is detected to be Internet Explorer 9.
Let me know if you have any questions, and I'll be happy to help further. Also, here's a link for more information on conditional comments, if you want a better understanding of them.
CSS Hack
As long as you do not want to set font or background just for IE 9 a combined :root hack will help
.somebox {
regular
definitions
here
}
:root .somebox{height:100px \ ;}
Conditional HTML Comment
Putting this in your head section after linking of the regular css file(s) will overwrite definitions only when IE 9 is used:
<!--[if IE 9 ]>
<link href="css/ie9only.css" type="text/css" rel="stylesheet"/>
<![endif]-->
ie9only.css must contain the IE 9 specific rules, of course.
Similar approach but using style tag instead of linking external file:
<!--[if IE 9 ]>
<style>.somebox{height:100px;}</style>
<![endif]-->
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]-->
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]-->