IE7 is scanning all of the styles in my css regardless of whether or not they're in a media query. I thought IE7/8 ignores media queries. It's not ignoring them, it's just barreling through and grabbing all of the styles. Very strange.
I've tried to search for a solution, but all I can find is ways to hack it so media queries actually work in IE7.
Would the best way be to just create a separate css file for the media queries that doesn't load in IE7?
Any help would be appreciated.
There are JS libraries to make IE support CSS3 media queries:
https://github.com/scottjehl/Respond
http://code.google.com/p/css3-mediaqueries-js/
I am having the same issue. IE7 does not ignore media queries, so there's two solutions I've thought of, though I wish there was a more elegant solution:
1) Put all queries at the top of the page, so the last default appearance will take precedence. Unfortunately, if you're overriding the styles according to, for example, screen size, then you have to put the media queries at the bottom.
2) Reset the styles in IE7 with an IE-specific stylesheet (loaded after your main stylesheet). The method I've been using for this is taken from Boilerplate (specifically the Boilerplate theme in Wordpress here: http://wordpress.org/extend/themes/boilerplate):
<!--[if lt IE 7 ]><html class="no-js ie ie6 lte7 lte8 lte9"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie ie7 lte7 lte8 lte9"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8 lte8 lte9"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie ie9 lte9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js"><!--<![endif]-->
This enables you to target IE browsers, and you could put the styles in its own stylesheet (so other browsers aren't loading it at all) or at the end of your normal stylesheet.
html.ie7 div {}
Etc.
Neither method is very graceful... This crap is why I hate Internet Explorer. (Would you believe my site still gets visits from IE7 and IE6 users? Too bad for the IE6 users, but I'm not even bothering with checking compatibility for them anymore.)
Related
Tool tip seems broken for Html Editors in IE 9 browser. Is there a way to fix this?
Fiddle here: https://fiddle.sencha.com/#fiddle/4bv (Issue only on IE 9)
Thanks
Disable compatibility view, this will solve the problem. Add the following meta tag to your page html header:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
It will force IE to render the page on IE 9 Mode despite the general browser options, here's the full detail on the options for compatibility view meta tags.
You can disable compatibility view manually also to test the differences between both rendering modes, such as follows (here's a KB entry on the subject)
Hope this solve your problem.
I'm trying to make my web application based on Angularjs work in IE8 and IE11.
After a lot of search, i am asking my question here: is it possible to make an Angularjs application work in IE11? and into IE11 ?
Thanks for advice
I had a problem while loading a angularjs file on IE. It worked perfeclty as expected on Chrome and Firefox but was giving error as angular not defined and what not. After searching on Internet I applied following fix to my code
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
and now it displays the page.
It should work and how you achieve that will depend on the application you are writing. Basically, you have to add extra codes to handle IE8. The AngularJS guide on IE should be a good place to start.
However, there could be situations where you run into problems. For example, when you want to use the "X-UA-Compatible" meta tag. An option could be to use the Google Frame plugin but Google has stopped updates on it from January 2014.
I think your question needs to be more precise about What is wrong with IE11?
I have personally created angularjs applications that works from IE8+ and on all other browsers like chrome, safari, firefox, opera. With all these browsers angular worked just fine.
It is important to mentioned that Microsoft broke the "Internet Explorer" inheritance meaning that internally IE11 is completely different from all other previous versions of IE but being the most advance version of Internet Explorer Angular does not need any particular "adaptation" to work with this browser.
If there is anything you should be worry it is IE8 :) and I am not saying this because of angular but because of IE8 itself.
Can someone please help?
I have created responsive email with desktop and mobile versions of code. It works fine in every mail client except in Outlook Web app that displays both versions.
I had the same problem with Outlook 2010, but I fixed it by wrapping mobile content in contidional mso comment:
<!--[if !mso]><!-->
<!--<![endif]-->
Woo!
Anyway, I'm sure your email is set up with some display:none / overflow:hidden css on the div that wraps around your tables for the mobile version, but outlook.com doesn't always play nice.
I think outlook.com's finicky preprocessor is to blame.
What I've found to rectify this is to add a .mobileonly{display:none;} to your style tag, then add class="mobileonly" to any problem elements that keep popping up on tests. Most often you just need to do the higher up container tables.
If that doesn't work throw your html into a jsfiddle and I'll look further into it.
I had the exact same nightmare and tried everything in the book. Eventually I found a solution.
Set the containing column height to 0 - the desktop and mobile image each need their own class. The mobile image should have inline width & height also set to 0. Then in your desktop query... display:none, width and height set to 0 for mobile image.
Then in your responsive query you can force the height and width of the resp image and use display block. Try this it worked for me...even in Outlook 2003!
My site works well if i use IE7 standard mode emulation with IE10 but totally freaks out with native IE7, having totally messed css almost everywhere.
Can i force this standard mode on native IE7 or i must recheck all and manually try to fix it?
I already tried adding this tag on meta:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and already tried to set doctype as
<!doctype html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
all without any success
Edit: Found one interesting thing:
IE7 totally mess up your site if the first line in html is a comment! IE7 emulator doesn't so in some case (like mine) we can have totally different results! Now native ie7 and ie7 emulator give the same (messed) output :)
I´m using a different stylesheet for smartphones and smaller screensizes using <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/smartphones.css" />
The thing is that in my browser it works ok (when I make the window smaller, or when I use a site that emulates some smaller devices), but it won´t work when I try to access my site using my phone.
I´ve tried with an HTC Wildfire (240x320 px) and I´ve set my smartphones.css stylesheet to get called if the screen is smaller than 700px.
I´ve deleted the cache, and I´ve even tried with a couple of other phones... it still appears the complete, normal, big sized window version of my site.
Any thoughts on what could be wrong?
The site is liganet.net
Thanks!!
It might be that your smartphone is not telling your website that it's screensize is small. It happens with smartphones sometimes. My HTC Wildfire scrolls the window and keeps it big, instead of telling the website that it should be handed a smaller version.
Maybe you should check for HTTP headers for User-Agent instead of relying on screen size for this.
hey just add this in tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and it will work.