I have a responsive site located here: http://wnmu.edu
Everything seems to be working just fine in all other modern browsers except IE9.
It seems like only certain #media queries are being recognize, even though they are in the same stylesheet. Take a look at this screenshot:
The menu "About WNMU, Current Students..." is visible, which is originally hidden in less than 480px screens. However, the hamburger menu is still visible. My css code seems pretty simple:
#media only screen and (min-width: 784px){
.banner #responsive_menu_toggles {
display: none;
}
}
I have capability mode off.
Thank you.
It looks like this question was asked once before, here.
Media query not working in IE9
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.
If you are curious I found this by searching google for ie9 #media css issues
Wow. Just figured it out. I guess IE9 has a "4094 rule" limit. So I broke apart the css file, and everything is good! I'll definitely see why I have so many rules.
Sigh of relief.
Related
I am developing a web page that will only be available from the company's intranet. At first the client's requirements was that if needed to work with IE8 which was fine.
Our first problem was that after launching the site live so the client can test it, we realized that every employee's IE was configured to open intranet's website in compatibility mode (The way employees computer are set up) which destroyed everything visually since nothing was tested for IE7...
I managed to make it work at 95% by including this meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
For the other small glitches on the page, I included a small script to detect if it was in compatibility mode and then load another css to fix those other glitches and it works perfectly, everything went back to the right place and the design is fine:
$(document).ready(function () {
try { JSON } catch (e) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='../css/compatibilityMode.css'>");
$("head").append(cssLink);
}
});
The problem now is that they need to be able to print that page so I need to make a css for print. The page is divided in sections and before every one of them I use this code to do a page break. EX :
.part2 { page-break-before: always; }
This works perfectly in Chrome and IE9+ but in compatibility mode it's ignored and the print preview is completely messed up...
I researched a lot on the web and the page-break-before property is supposed to be supported since IE4 so I do not understand why it's not working...
Also, to tell IE which styles to apply to the print version, I put my print css inside this tag :
#media print { }
According to my research online, some people say that this is not supported in IE8- since it's media queries and some says it is supported because media types were supported way before media queries and it should work...
I really don't know what to try and where to look anymore, was wondering if anyone could point me in the right direction or give me any suggestions as what to try next..
Thanks in advance!
I'm new to programming in general, especially CSS. I am currently working on a new website for train enthusiasts. I'm doing it from scratch so that I can get some experience in HTML, CSS, PHP, MySQL, etc.
Anyways, I've run into a problem. I've searched Google for a solution, but haven't been able to find one. My CSS seems to be compatible with every web browser on the market EXCEPT Internet Explorer. I don't really know how to explain the problem unless you check it out for yourself. It's as if my header and left menu are the only styled elements, but my content and right menu are pushed to the right and not styled. Check this link in IE and another browser respectively. You'll see the difference.
So my question is this: How do I fix it? I know it must be an IE bug since it works in every other browser, but I don't know what it could be! If I need to post my CSS script, let me know. Thanks in advance for any help you guys can offer!
In your style sheet you have a superfluous width:100% on a div element (block level elements naturally have a width that fills their container). IE is interpreting this 100% as that of #container. You can correct the styling issue in IE7 (theoretically) by removing this width:100% at line 119 of styles.css. I theorize that this is cased by how IE7 interprets display:inline-block
I must warn you, however, that ensuring compatibility with IE 7 and lower is a major pain in the arse and totally not worth it. :)
Which version of IE are you using to test it?? I checked it on Firefox, IE9,8 and 7. looks fine on IE8 and IE9. While there are few issues on 7. You could use conditional commenting to fix issues in 7.
create a new css file specially for IE7 and then
use a code like the following in your header
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
now play around with ie7.css till things look better. The good thing about this method is you can fix issues in IE without interfering with other browser rendering. You could also use "ietester" and debug bar to determine what exactly is wrong. im not able to find the exact link right now but google should help.
You could read more about conditional commenting here http://www.quirksmode.org/css/condcom.html
I'm working on the website: insectstings.co.uk, it's responsive and I've made some changes to the original theme.
For some reason in IE8 (maybe others) the menu is displaying as the responsive menu. I've tried changing the media query size but it doesn't help.
Also the main header image is far away from the body content, I've tried inspecting it but with no luck. I hate IE, everything displays fine in other browsers.
Try adding repsond.js to IE8 and below. It provides some media query functionality for IE: https://github.com/scottjehl/Respond
IE versions below 9 do not support media queries: http://caniuse.com/css-mediaqueries
The normal flow of CSS will take over, so IE8 will show whatever you delcare last in your CSS.
EDIT: You might want to read this article, which coveres targeting older IE versions with different CSS. I have been using this method for a while now and it works really well: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
I've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
When IE8 is released, will the following code work to add a conditional stylesheet?
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8.0.css" />
<![endif]-->
I've read conflicting reports as to whether this works with the beta. I'm hoping someone can share their experience. Thanks.
One thing to note:
It does work, BUT if you are loading the page/site local network (e.g. Intranet) it will load in IE7 mode by default! (update - localhost[*] is a special case, that does render in standards mode)
This goes against MSFT's original statement of going STANDARDS by default.
e.g.
http://127.0.0.1/mysite/mypage.php <-- IE8 by default (updated!)
http://localhost/mysite/mypage.php <-- IE8 by default (updated!)
http://machinename/mysite/mypage.php <-- IE7 by default
http://192.168.100.x/mysite/mypage.php <-- IE7 by default
http://google.com/ <-- IE8 by default
[*] - Scott Dickens [MSFT] noted in a comment here on the IE Blog that localhost was a special scenario in the Intranet (often used to develop Internet sites) thus would render in Standards mode by default.
To test what mode a page in IE8 is really rendering in, you can use check the developer tools or use this bookmarklet code (only works in IE8):
javascript:
var vMode=document.documentMode;
var rMode='IE5 Quirks Mode';
if(vMode==8){
rMode='IE8 Standards Mode';
} else if(vMode==7){
rMode='IE7 Strict Mode';
}
alert('Rendering in: '+rMode);
It worked for me – both in quirks mode and in standards compliance mode. However, it does not work when switching to IE8 compatibility mode.
Tools/Compatability view settings
uncheck them all
Thank you for your help. I've discovered the solution, apparently the problem was having each style sheet use its own title attribute. Once I took the title off all but the main style sheet, no prob.
This is a weird issue unique to IE8 - and although I've been told its supposed to work that way, something to do with "Stylesheet Preference" - it only serves to create problems since the solution requires you remove the title which could be helpful when scripting, etc - when you need to call the style sheet.
In any case, not sure if this is a bug, or its supposed to be that way, but I hope Microsoft investigates further.
Thanks
Why even bother writing a separate stylesheet for IE8?
If you've already debugged for IE7, you can force IE8 into compatibility mode, and thus display your code as though IE8 were IE7.
All you gotta do is put this RIGHT BELOW the opening head tag. Anywhere else and it won't work.
And then that's a half hour or so less work on average per project, no intense debugging for IE8 needed!
Even Msn.com does this - kind of ironic, eh?
Wrote a blog post about it recently: http://blog.sankhomallik.com/2009/11/16/stop-wasting-time-debugging-on-ie8-when-you-dont-have-to-or-get-ie8-to-behave-like-ie7/
IE8 renders pretty nice compared to IE7, I have stylesheets for IE6, IE7 and IE8; at first i thought conditional comments were not working for IE8 after a bit of experimentation i found some rules were not beeing applied by IE8 just because i needed to put the ancestor or parent class first, e.g.
i had a class like
.niceclass {some:properties;more:properties;}
it worked only if i changed it for something like:
.parentclass .niceclass {some:properties;more:properties;} or
#parentselector .niceclass {some:properties;more:properties;}
btw in my IE8-only css i have only one overriding rule, the rest is rendered almost like firefox, though thats not making me leave FF anyway!.
For my part I wanted to use rounded borders using css. IE8 on Vista does not support such. And since the graphics were so that the rounded borders would show a nice rounded shadow as well, the page looked terrible in IE8.
I tried using conditional comments, but to no avail, IE8 would not evaluate the if IE expression and thus would not include the external stylesheet.
Then I had a look at putting it into quirks / compatiblity mode, however, this still did not work as the CSS hacks I had used did no longer work for the IE8.
Last but least I found a working CSS hack that will render the page correctly when in compatibility mode.
* + html #test[id] { color:lime }
Now, I do not know if this works for IE7 or below, so you would have at least three
different hacks for each IE release you want to support, e.e.
* + html #test,
html+body #test,
* html body #test
{ color:lime }
I wonder what the next regression of the Internet Exploiter will behold for us.