css3 media query not working in IE below ie10 - html

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 { }?

Related

Media Queries in CSS file not working on Safari

My responsive design is working in every browser but Safari. Here is a screenshot of the code in the main file and in the CSS file. Is there something I have missed? Why isn't this working?
I should add that the media query works perfectly in the HTML file in a tag but will not work in a seperate CSS file.
Thank you in advance
/* Nav Bar Dynamic */
#media screen and (max-width: 1999px) {
/* code here */
}
#media screen and (min-width: 2000px) {
/* code here */
}
/* End NavBar dynamic */
<head>
<link rel="stylesheet" href="/Styles/newStyle.css"/>
<link rel="icon" href="/Images/manLogo.png">
<script src="/NewSite/JavaScript/exploreScript.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

How to fix media queries in css?

I need to create desktop and mobile versions of the site. I decided to use media queries in CSS. But when I coded them, I found out that they aren't working and I don't know how to fix them. To fix this issue I went to Youtube where found this example, but I implemented that I found that the media query doesn't work. Then I went to stack and found a similar problem. In that case, it was fixed by adding a meta tag in the head. I did that, but it didn't help me. It wasn't work in chrome and Mozilla.
body{
color:red;
}
#media screen and (max-width: 600){
body{
color: blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>
You need to specify the units for your max-width property. Change the line
#media screen and (max-width: 600){
to
#media screen and (max-width: 600px){
And try it again

HOw to give Padding bottom only for IE

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; }

Bootstrap 2.3.2 responsive layout doesn't work on IE8

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.

Internet Explorer 11 using media query css

I'm doing some testing on IE 11 and it's using the CSS for mobile devices and not the "full screen" css. Chrome, Firefox, Opera and Safari all use the correct "full screen" CSS, but IE 11 is grabbing the mobile/media css. I've cleared the cache multiple times and looked at the CSS sheet that it's grabbing, and it is using the most up-to-date version.
In the head I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/default.css">
</head>
In the CSS file, I have the following after all of the "full sized" css
//"full sized" css
....
#media only screen and (max-width: 479px) {
//mobile CSS
}
IE 11 on my laptop is using the media CSS and I can't figure out why. I know it's using the media only section and not just formatting incorrectly, because when I delete the media only section from the CSS, it then displays as expected.
can you try this:
#media all and (max-width: 479px) {
//mobile CSS
}
with all you are targeting all devices, and not only the desktop version you are now targeting with screen.
For mobile only, you would do this:
#media (max-width: 600px) {
//mobile CSS
}