I'm having problems when it comes to print in EI9. It seems that the css is failing, but it works great in IE10, IE11, Firefox and Chrome.
I read about bootstrap (yes, I'm using it) and html5 issues when it comes to this browser, but I couldn't find a solution that works in my case.
This is the most significant thing that I've tried so far:
<!--[if lt IE 9]>
<script src="html5shiv/dist/html5shiv.js"></script>
<script src="dest/respond.min.js" type="text/javascript"></script>
<![endif]-->
Thanks!
This might help.
Printing Twitter Bootstrap correctly
This site has a pretty detailed explination for html and js browser hacks. http://browserhacks.com
You could also try forcing the IE mode. Like set it to edge.
IE Compatibility Mode: 'X-UA-Compatible' tag 'Edge'
This is a long shot..
http://support.microsoft.com/kb/973479
Related
Using the Zen starter theme for Drupal 7, I've created this site: www.nettango.com. Everything seems to work fine and I've been figuring things out as issues come up. However, I've been trying to get IE8 to respect the responsive styles. Here's what I've done:
Site Settings:
Checked - Add Respond.js JavaScript to add basic CSS3 media query support to IE 6-8.
Checked - Add HTML5 shim JavaScript to add support to IE 6-8.
Checked - Add meta tags to support responsive design on mobile devices.
Which calls this into action:
<script src="/themes/zen/js/html5-respond.js"></script>
The script is being loaded, but it doesn't obey my mediaqueries.
After that, I replaced Zen's script with these:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Which had the same effect - nothing.
Here's a sample from my css file to show how the mediaqueries are setup:
#media screen and (max-width:1100px) {
html{font-size: 83%;}
#header {background:blue;}
}
Feel free to inspect the www.nettango.com site files. I've spent the majority of my day trying to solve this and have had no luck.
Thanks in advance for any help.
This is most likely because you are trying to use css3-mediaqueries while in development mode. Drupal 7 uses the #import rule for stylesheets in non-CSS aggregation mode.
From the css3-mediaqueires.js project summary:
Note: Doesn't work on #import'ed stylesheets...
Hence, css3-mediaqueries.js will only take effect when CSS aggregation is turned on (in production).
Appears the mediaqueries work on the live server, but not on our local server. Strange. Not sure why that is.
I also noticed you have to set firesass to false in your config.rb file. It wont work in IE8 if Firesass is enabled.
I literally have to type in
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
to get my css hack to work for ie8. And yet when I click the 'abouts' tab in my IE browser, it clearly says IE8 version 8.0.6001. 18702.
I already reinstalled IE8 because I thought this issue was wierd but I still have to use the IE7 hack in order to get my IE8 only css to appear in my IE8 browser.
Is there something I can do to fix this? I have to talk to other developers and it is somewhat annoying not knowing exactly which IE version I have.
It looks like your IE8 is running in Compatibility View, which causes it to render pages like IE7, including reading IE7 conditional comments.
Look for the button in your toolbar that looks like a torn page, click on that, and it should disable it and return you to IE8 rendering mode.
I thought IE7 and above followed the same box model as Chrome/Firefox/Opera, but when I run the following code in IE8 and then in Chrome/Firefox/Opera, I get different results.
In IE8, the end of the box shows up with a bit of a lip that I want to get rid of. Is it possible to use strictly CSS to fix my issue or do I need to use Javascript to detect the browser and then change the CSS?
Here is the link to the code that I am working with. In order to see my problem, you need to use IE and then either Chrome, Firefox or Opera.
http://jsfiddle.net/LsXTk/1/
IE7 has two modes: Compatibility mode and Standards mode. Yet another of a long line of brilliant moves on MS's part with IE. (Yes, I'm being sarcastic):
http://blogs.msdn.com/b/chkoenig/archive/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode.aspx
What usually trips people up is that, by default, IE8 reverts to compatibility (ie, broke) mode if the page is being loaded locally or from a server on your network. I guess the logic was that it must be a page on your intranet, and since 90% of all intranet web software is horrifically coded IE6 monstrosities that pretty much break in any standard browser, it better assume the code is broken and revert to compatibility mode.
As for detecting IE8, you can do it without JavaScript via IE's conditional comments. What I typically do is wrap the opening body tag in conditionals and give each a unique ID:
<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gt IE 8]>
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
<body id="IE8">
<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
<body id="IE6">
<![endif]-->
Then in your css, you can easily serve up separate CSS as needed:
.myStyle {for good browsers}
#ie7 .myStyle {fix for IE7}
Please have a look at the menu at my site: http://server.patrikelfstrom.se/johan/fysiosteo/
In FF & chrome, it works as it should. But the css doesnt seem to get used in IE and i cant figure out why. Any help is appreciated!
Just i see your code in firebug. You used -moz-linear-gradient and box-shadow properties. I think this is not support lower version ie.
Try putting this:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
into your code to allow the nav element to work in lower versions of IE.
CSS is not loading for my site on IE7 for some unknown reason. Its working fine for IE8, chrome and mozilla. You can see the website at www.fineartsbaroda.com
Is this answer resolved?
If not, I was going to suggest putting media="screen" for the default.css stylesheet link.
I suspect that it's because of ::-moz-selection.
css selection is not working in IE
You may need to add a conditional work-around/hack using something like
<!--[if gt IE 8]>
<![endif]-->