I am trying to add padding to a input area using
-ms-padding-bottom:8px; in IE11 , but it is not working can someone help me
please.
You can use conditionnal tags in your <head> to include a stylesheet only for IE (6 -> 9).
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
See this article
For IE 10+ :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.foo{background: red;}
}
For IE 11 only :
_:-ms-fullscreen, :root .foo { background: red; }
Related
Actually I need to specify this property
margin-left:-20px;
only for the IE-11 and the rest of the properties for all browsers in CSS file
.navigator li a span {
display: block;
float: right;
width: 80px;
height: 50px;
margin-right: -10px;
margin-left:-20px;
}
Is there a way to do that, as I tried many solutions and didn't work
Thanks in advance!
I wrote is very simple and only supported by IE 11+
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
// or you can try this
<style>
#media all and (-ms-high-contrast:none)
{
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
and of course the div...
<div class="msie11">
This is an Internet Explorer 11 and greater CSS Hack
<div>
So the text shows up in blue with internet explorer 11 and greater. Have fun with it.
for more reference you can look around with given link
Reference
It sounds like your problem could be solved in some other way than browser-conditional styles, please try that first, but in any case:
For IE 10 and 11, you can use this:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Note though, that it will recognize both IE 10 and 11.
source: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
You may also want to take a look at this:
http://marxo.me/target-ie-in-css/
For IE 9 and lower, you can use this:
You create a separate stylesheet for that, and then you use this to include that in your HTML.
source: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For example, if you wanted to target IE 7, you would do this. You can just change the version number to what you will.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
And then you can also target lower or higher versions than a specific version:
Lower than IE 8 and IE 8:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Higher than IE 8:
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Note that you can use lt, lte, gt or gte.
I have a problem with IE8, so I need to apply some css only if browser is not IE8
In html I can do it using
<!--[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]-->
But I want to filter this using CSS
Is there a way where I can instruct browser apply these styles if its not
IE8 ?
For example, how can i make this css not have any impact in IE8?
#font-face{
//some css
}
Conditional comments would work (<!--[if lte IE 8]><stylesheet><![endif]-->), but if you want to do it all in the stylesheet, there is a way:
body {
color: red; /* all browsers, of course */
color: green\9; /* IE only */
}
The important thing here is the "\9", which has to be exactly "\9". I'm not clear on exactly why this is.
EDIT: The \9 hack isn't enough by itself. To exclude IE9, you also need the :root hack:
:root body {
color: red\9; /* IE9 only */
}
Other browsers besides IE might support :root, so combine it with the \9 hack if you're using it to target IE9.
IE6
Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
For More Information
http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
IE 8 doesn't support media queries - you can use that (just insert your CSS inside some broad media query).
Have a look at list of browser-specific CSS hacks here or here.
Below I copy-pasted some concerning IE 8:
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
For only IE of specific version best way is to use conditional comments in HTML, like this (and like you mentioned):
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
But also you can do in this way for IE 8 only:
#media \0screen {
body { background: blue; }
}
More info here : http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
Is there any way to detect the IE Mobile browser using HTML conditional statements WITHOUT using JavaScript?
[if IE]> check is not working for mobile IE
<!--[if IE]>
<div class="iemobile-support" >
ATTENTION: We have detected that you are using Internet Explorer on your device.
</div>
<![endif]-->
Conditional comments are only supported in IE 5-9.
Source
Another fix is that you can write IE conditional css to hide or show the div.
CSS :
<style>
.iemobile-support{ display:none; }
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.iemobile-support{ display:block; }
}
</style>
<!--[if IE]>
<style>
.iemobile-support{ display:block; }
</style>
<![endif]-->
HTML :
<div class="iemobile-support" >
ATTENTION: We have detected that you are using Internet Explorer on your device.
</div>
I'll try to be more specific. I have this stylesheets on my main control
<link href="/css/Fonts.css" rel="stylesheet" />
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="/css/mysite.css" rel="stylesheet" />
<link href="/css/responsive.css" rel="stylesheet" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/explorer.css" />
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
my container width for large screen comes from responsive.css where I have this code
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
when I run my code in crome it is 1400px for large screen ignoring bootstrap container width this
#media (min-width: 1200px){
.container {
width: 1170px;}
}
and this
.container{
width: 940px;
}
but when I run my code in IE8 it picks up bootstrap container width
.container{
width: 940px;
}
and ignors
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
The problem is I want explorer 8 not to ignore my code for large sreen(1400px). I know I cannot add it in my "explorer.css" as a media query inside a media query like this. i know it won't work.
/* IE8 */
#media \0screen
{
#media handheld, only screen and (min-width: 1440px){
.container:1400px;}
}
So I decided to add !important on this
#media handheld, only screen and (min-width: 1440px){
{.container:1400px !important;}
}
so it began to be of the size I want for the large screen but now it resizes very slowly(due to css3-mediaqueries.js which works slowly) and is not showing up mobile design .So now my question is whether
css3-mediaqueries.js supports mobile? Thanks for trying to help.
I have created a responsive email template and the problem is media queries are not working in below IE10 browser. I have used js library to make it run but it is not working.
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#media screen and (max-width: 600px) {
/*widths for standard blocks*/
table[class=w15], td[class=w15], img[class=w15] {width:15px !important;}
table[class=w170], td[class=w170], img[class=w170] {width:290px !important;}
table[class=w180], td[class=w180], img[class=w180] {width:145px !important;}
table[class=w200], td[class=w200], img[class=w200] {width:320px !important;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
Web link url:
http://silista.in/praveen/template-1.html
Best media query hacks for IE would be
IE10 #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
IE8 #media \0screen {}
IE7 #media screen\9 {}
You can add your IE specific CSS code within any of the media queries above.
Read more here: http://browserhacks.com/
I also saw IE 9 is #media screen and (min-width:0\0) {}
Question - Can you just add that snippet of code in the style tags or do you also need to add all applicable CSS in between the { }?