I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
All browsers, with the exception of IE9, show desktop site as needed. Mobile browsers correctly show the mobile layout. The problem with IE9 is that it also shows the mobile layout.
Now if I remove the words "only" and "screen" from the above code, IE9 then correctly displays the desktop site. The problem is, then the mobile browsers also display the desktop site. I've done some research on this, and haven't seen anything on this issue.
Thanks for reading,
John
Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".
According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".
In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.
Yes, use the #media (max-width: 860px) instead of max-device-width.
IE 9 just gave me a heart attack. The project media queries did not work.
Then after some minutes of googling, you have to include the CSS in the HTML.
Inline styles only!
What a drag these IE browsers are!
I usually add this to my projects and it's been working for me so far:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
IE compatibility mode solves the issue.
Go to Compatibility View Settings and disable the option Display intranet sites in Compatibility View.
Related
I'm trying to make media queries work on IE8 (Because my company use it, sad I know.) and I already found things like respond.js. The irritating thing is, when I use this link : http://scottjehl.github.io/Respond/test/test.html on IE8, it works perfectly...BUT ! When I download the lastest version of respond.js, and try to launch this exact same test.html page, it doesn't work ! I didn't edited anything, and even the test page written by Scott Jehl doesn't work. Some help please, before I go nuts.
:|
Let's gather some info around the net...
In Bootstrap's test file here http://getbootstrap.com/getting-started/#template there are some lines in code which say:
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Drupal page here https://www.drupal.org/node/2173441 says:
Due to browser security rules, Respond.js doesn't work with pages
viewed via the file:// protocol (like when opening a local HTML file).
To test responsive features in IE8, view your pages over HTTP(S). See
the Respond.js docs for details.
So, lets go where we should be from the very beginning...The official docs :D
Respond.js doc
...which say, among others,
Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark
(BOM), they will not work with Respond.js in IE7 or IE8. Noted in
issue #97
WARNING: Including #font-face rules inside a media query will cause
IE7 and IE8 to hang during load. To work around this, place #font-face
rules in the wide open, as a sibling to other media queries.
...So if you have a problem with respond.js and ie8 be sure to make a quick check on all of the above and of course, read the official doc.
also worth reading: http://nextflow.in.th/en/keep-your-responsive-web-design-against-the-legendary-internet-explorer-ie6ie7ie8/using-response-js-to-make-ie6ie7ie8-understand-your-responsive-design/
Put response.js after all CSS you use in web page. Except you are
ready for weird action.
Response.js has an issue with CDN & domain.
Problem solved !
I had to put my project on a webserver to make it work. Just opening the html file isn't enough.
We are building a website for a client but cant seem to find the bug which causes the images under the slider not to load.
There are some posts going around about the .load function not properly working in IE.
Does anyone have an idea?
http://mbx.web-flight.nl/
Greatly appreciated.
You're problem is Internet Explorer Quirks Mode. You must define a page header in such a way that IE will load the site in standards mode. Switch IE to standards mode manually and you will see the images load.
Try the following on the page to declare DOCTYPE.
<!DOCTYPE html>
Or try to Force IE to use the latest render mode
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Learn more about Quirks mode here: http://en.wikipedia.org/wiki/Quirks_mode
Ultimately the BEST solution is to address the problem at the server level if you have access to do so. See http://msdn.microsoft.com/en-us/library/jj676913%28v=vs.85%29.aspx To learn about configuring web servers to specify document modes.
This is what I see. Does anyone see the same as me. If not, I wonder if it is related to Quirks mode.
On IE 10 for me works fine, but in the IE 9 and lower not works.
This could be happens because the IE 9 don't have some elements of HTML5.
I think that you put this in your file will woks.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
Made a test.
I hope help you.
Link for downloads files
https://code.google.com/p/html5shiv/
After allot of searching the bug had to do with the imagesLoaded function which was being used which is part of:
http://isotope.metafizzy.co/
IE does not seem to play nice with it so I made the carousel to initialize on window’s load event (jQuery(window).load) instead of “imagesLoaded”.
I've been following this question - Landscape printing from HTML
I include - #media print{#page {size: landscape}}
in my CSS file.
I'm aware that not all browsers support this, but there's conflicting information online where some people say this works and some say it doesn't.
I've been trying to do this in Chrome and it won't work. I wanted to know if anyone has been able to successfully do this on Chrome? Or does this not work on Chrome(and I should stop wasting time on it)?
This works in Chrome Version 31.0.1650.63
<head>
<style>
#media print {
#page {
size: letter landscape;
}
}
</style>
</head>
I am trying to use CSS to scale my images to precise values:
HTML:
<div id="thumbnail-container">
<img src="sample-pic.jpg"/>
</div>
CSS:
#thumbnail-container img {
max-height: 230px;
max-width: 200px;
}
In this example, sample-pic.jpg is actually 320x211.
In Firefox 11.0, this code works perfectly fine, and FF resizes sample-pic.jpg to the 230x211 max constraints set forth in the CSS rule.
In IE 9, however, the max-height and max-width rules are completely ignored and the image renders as its usual 320x211 size.
How can I modify the HTML/CSS so that both IE 9 and FF 11.0 both honor these max constraints? Thanks in advance!
Make sure you've declared a doctype and that there's NO output or whitespace before it. For example, this is HTML5's doctype and it should go at the very top of your output:
<!doctype html>
Also, if IE is in compatibility mode, that can cause problems. Try adding the following to your <head>:
<!-- Forces user OUT of IE's compatibility mode and removes "broken page" icon -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
edit: I was able to test, and it seems that no doctype does cause max-width not to work. Compatibility mode didn't seem to affect it (on this issue).
IE7+ supports max-width and max-height.
Demo at http://jsfiddle.net/gaby/qE6w6/
check that you page runs in standards mode.. (make sure there is a valid doctype)
I'm trying to find a way to display one link to an IE user and another link to all other browsers using javascript or conditional comments (or whatever it takes).
Basically...
//pseudo code
<!--[if IE]>
<a href"ie-only.html">click here!</a>
<!--[else]>
<a href"all-other-browsers.html">click here!</a>
<![endif]-->
I don't think this is possible with conditional comment tags (which only work in internet explorer). Plus I don't think there is an "else" statement.
Is there a way to do this with javascript? Please help! Thanks!
I don't think this is possible with conditional comment tags (which only work in internet explorer)
Sure it is. You just have to leave the content for non-IE browsers in a position such that it's part of a conditional comment clause but not actually inside a <!-- comment -->. Then browsers that don't know about conditional comments will see the content fine. This is known as a downlevel-revealed conditional comment.
Unfortunately the markup Microsoft give you there is invalid HTML (and not even well-formed XML). To make it pass muster you just need a few additional ‘--’s:
<!--[if IE]> This is IE! <![endif]-->
<!--[if !IE]><!--> This ain't IE! <!--<![endif]-->
Although I have to echo AnonJr's non-answer, in that it's rare you should need a completely separate link/page for IE compared to other browsers. If you're doing something tricky like complex VML and ActiveX work in IE with Flash on other browsers I guess there could be a reason for it, but usually a few CSS and script hacks over the same basic page should suffice.
This is not going to be the popular answer, but its damn time somebody started posting it - stop with the browser-specific junk. You're only perpetuating future problems when new versions come out.
If developers had taken the additional time (yes, it takes time and hard work. If you can't convince your clients you aren't trying hard enough) then we wouldn't have seen IE7 "break the web" and there would have been even less of a brouhaha with IE8.
Yes, IE is less standards compliant than the others. But, Fx is also missing certain things that are a part of the standard too. They all suck when it comes to "standards". But they are all getting better. (At different rates, but they are all getting better.)
Think first why you are trying to do this, and ask yourself if you really want to deal with this when the next browser version comes out and you have to re-jigger your browser detection and how you handle version X of browser Y.
[/rant]
Edit: To answer some of the comments that point out the obvious fact that I didn't really answer the question, without more information this question makes me wonder if we're not trying to help a person decide to hammer in a nail with a glass bottle or a shoe...
This is the Microsoft-approved way:
<!--[if IE]>
click here!
<![endif]-->
<![if !IE]>
click here!
<![endif]>
More information available at http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.
Edit
This code is implicitly guaranteed to work in all current and future versions of IE starting with IE 5. For non-IE browsers, the code works by relying on those browsers ignoring the "nonsensical" <![if !IE]> tag, which they all do, and I've never seen it fail. For a version that uses nothing but good ol' HTML comments, see bobince's answer, which I actually prefer to the Microsoft-provided solution.
One way that I've figured out how to do it:
Get the javascript code from http://www.quirksmode.org/js/detect.html and put it in the <head> tag.
Then in your <body> tag use:
<script type="text/javascript">
<!--
if (BrowserDetect.browser == 'Explorer') {
document.write('Explorer');
} else {
document.write('Other Browsers');
}
// -->
</script>
Not sure if this is the most simple way to do it but it got the job done.
A shot in the dark, maybe, but would this work?
<style>
a.forIeOnly {display: none; }
a.notForIe {display: block; }
</style>
<!--[if ie]>
<style>
a.forIeOnly {display: block;}
a.notForIe {display: none; }
</style>
<![endif]-->
Link One
Link Two
It's nowhere near as clean/attractive as an if/else statement could be, but...it was the easiest way I could think of to implement a solution. Though it may well be fraught with issues all of its own.
Add this to your header :
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
Then whatever you want to your .css page :
/* Chrome Only */
.chrome embed {
display: none;
}
/* Firefox Only */
.gecko video {
display: none;
}
Source : http://rafael.adm.br/css_browser_selector/
Available Browser Codes [browser]:
ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5
ff3_6 - Firefox 3.6 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron
I didn't try, but maybe you could use IE flaws on CSS. Eric Meyer has written this article on the subject: Tricking Browsers and Hiding Styles.
You could always use CSS to hide the code from specific browsers. For instance, considering the following code:
<a href"ie-only.html" id="ie-only">click here!</a>
<a href"all-other-browsers.html" id="other-browsers">click here!</a>
You could apply the following CSS hacks, and the appropriate links would be displayed to the appropriate browsers.
/* Display settings for most browsers */
#ie-only {display: none;}
#other-browsers {display: block;}
/* Display settings for IE <= 6 */
* html #ie-only {display: block;}
* html #other-browsers {display: none;}
IE supports conditional compilation, which you can use to easily deliver IE-only code without needing to perform user agent sniffing or feature detection.
/*#cc_on
/*#if (#_jscript)
alert("IE.");
#else #*/
alert("Not IE.");
/*#end
#*/