I'm trying to get media queries to work in IE8 using Webshims Lib. I've followed the setup instructions and loaded the default (all) polyfills, but it doesn't seem to work.
Am I still supposed to still explicitly include html5shiv? I thought Webshims Lib would take care of it?
Cheers.
You need to download respond.js, after adding these statements:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<link href="css/bootstrap-ie8.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Related
I need to install Handsontable with RuleJS support (for formulas) locally (i.e. not just access its files from github), under Windows. I will later need to distribute with my application. I really do not want to have to install & configure bower, git etc.
Initially, starting from https://github.com/handsontable, I tried downloading the zip from https://github.com/handsontable/handsontable. Then I had to fetch various extra bits from elsewhere on github, attempting to make the demo at http://handsontable.github.io/handsontable-ruleJS/ work. This includes its stuff via:
<!-- handsontable v1 -->
<script data-jsfiddle="common" src="lib/handsontable/handsontable.full.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="lib/handsontable/handsontable.full.css">
<!-- ruleJS -->
<link rel="stylesheet" media="screen" href="lib/handsontable/handsontable.formula.css">
<script data-jsfiddle="common" src="lib/RuleJS/lib/lodash/lodash.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/underscore.string/underscore.string.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/moment/moment.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/numeral/numeral.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/numericjs/numeric.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/js-md5/md5.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/jstat/jstat.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/lib/formulajs/formula.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/js/parser.js"></script>
<script data-jsfiddle="common" src="lib/RuleJS/js/ruleJS.js"></script>
<script data-jsfiddle="common" src="lib/handsontable/handsontable.formula.js"></script>
This is all messy, and (I think) I could not even find the numericjs/numeric.js in any download package.
I then noticed https://github.com/handsontable/handsontable-ruleJS. This seemed much simpler: it has the handsontable stuff it wants in its own bower_components sub-directory, and its index.html example, with files included via:
<!-- handsontable -->
<script data-jsfiddle="common" src="bower_components/handsontable/dist/handsontable.full.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="bower_components/handsontable/dist/handsontable.full.css">
<!-- ruleJS -->
<script data-jsfiddle="common" src="bower_components/ruleJS/dist/full/ruleJS.all.full.js"></script>
<script data-jsfiddle="common" src="src/handsontable.formula.js"></script>
<link rel="stylesheet" media="screen" href="src/handsontable.formula.css">
Additionally, its README.md states Important: Few things have been modified in external libraries, so please use all library files only from this repo., which makes it sound like this is the safest way to go (and full, latest handsontable release might not even behave correctly).
However, I have just realised that handsontable-RuleJS has its included Handsontable stuff at version 0.14.1, while the latest release of that is 0.23, and there are functions I need from later versions.
So, is there a simple way to download what I need? Should I be using the simple handsontable-RuleJS link, with its included bower_components, or are they only there for the index.html demo, or overwrite them with newer versions, or what...? Or, do I really need to get bower & git, make them work right under Windows, and then magically everything will be sorted out in a way too difficult to just download directly?
All I did was use https://github.com/handsontable/ruleJS as it was really simple. I took the files I needed for my project and left the rest of it alone. I would just use this and see what functionalities you need from later versions. Then you can go back and include those.
I don't think there is any magical download that will just give you everything you need. You will probably need to play around a little but I don't believe you will need bower and git.
Zurb Foundation 3 says is compatible with IE8. This is the reason I'm using F3.
I have problems getting to work F3 on IE8.
I tried the official http://foundation.zurb.com/docs/v/3.2.5/grid.php which seems to have the same problems on IE8 which I found on my own site.
More specifically:
Navigation is messed up (The sticky menu is comming like an unstyled
vertical ul/li)
Orbit Javascript slider component doesn't work
Initially accordition looks fine visually. However when clicked it
doen't work as expected
Reveal modals don't work
The same problems are happening on both my site and the official F3 docs page - http://foundation.zurb.com/docs/v/3.2.5/grid.php
What could be the problem?
I suspect it might be something related with including things like html5shiv, etc. However I try to stick as much as possible with how the official F3 is showing. In the demo index.html of Foundation 3 following things are included:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
<script>
$(window).load(function(){
$("#featured").orbit();
});
</script>
Do I need to include something else? html5shiv would be enough or I need other things also?
Adding html5shiv.html solved most of the issues.
The only one remaining is that images (transparent PNGs) remain and accumulate on screen (one on top of the other) while the Orbit slider is running.
I put this code into my <head> in order to load an additional stylesheet for IE8.
<!--[if lt IE 9]>
<link rel="stylesheet" href="style-ie.css">
<![endif]-->
I also already did this 1000 times, but this time however it is not working. It's just not loaded in IE8. If I remove the conditional comment it load's normally.
Anybody an idea?
Perhaps, since you're targeting IE8, you should keep in the type="text/css" bit which was no longer necessary in HTML5? i.e.:
<link rel="stylesheet" href="style-ie.css" type="text/css">
Is this for an HTML5 site or XHTML / HTML4? If it's for an HTML5 site, following is what I usually do for these cases, as it's a good idea to also add the HTML5 shim bit in the same conditional comment:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Hope this helps!
I use Unsemantic for the first time, and I forgot to check my page on IE8. Here is the disaster : http://canapin.com/web/meteo/
Unsemantic is supposed to be IE8 compatible, but my page is messed up, and I can't figure out why.
Any idea? :(
As stated in its issue tracker, since IE8 doesn't support media queries, Unsemantic grid offers a fixed-width layout for it, through a separate css file inclusion:
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="./stylesheets/ie.css?1389034275" />
<![endif]-->
Note the conditional comment avoiding the separate css for mobile versions of IE (they are supposed to support media queries):
I suppose you can download the source of the separate css from here:
http://unsemantic.com/stylesheets/ie.css
So, if you accept to have an IE8 with fixed-width layout (and it seems very reasonable to me), you don't need a javascript fix ;)
Bye bye!
for IE8 and lower you have to include a shim, which comes with the Unsemantic files.
Include the following code in your head and you should be fine:
<!--[if lt IE 9]>
<script src="./assets/javascripts/html5.js"></script>
<![endif]-->
So, just point to the html5.js file and this should fix it. Let me know whether this worked for you.
Cheers, Marvin
I understand from my research that IE8 does annoying things like forcing itself into IE7 mode for local intranet hosts and local IP ranges. I understand from a previous question that there is no way to use conditional statements as, irrespective of whether IE8 is rendering in IE8 or IE7 mode, it will still only use the <!--[if IE 8]> conditional.
Since this question was asked a while ago (during the IE8 beta phase by the looks of things) I am wondering if this has changed or if there is any other way using conditionals to determine if IE8 is in compatibility mode.
Thanks!
No, you can't do it using conditionals.
The best way to do it is to use the document.documentMode property as described in the link Pekka posted. How can I detect if IE8 is running in compatibility view?
http://msmvps.com/blogs/paulomorgado/archive/2010/04/05/defining-document-compatibility-in-internet-explorer-8.aspx
In the end, I chose to mix the two common strategies to deal with this bug.
I created an override CSS file, which I import using conditional comments. In the event of IE 8 or 9, though, this override doesn't look as good, so I include the 'force IE into latest rendering mode' header switch, as shown below.
<!--[if lte IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="/Content/IE7Overrides.csss" />
<![endif]-->
This provides IE7 with a decent failsafe, but forces IE8 and IE9 to show it in the latest browser, which will show the CSS-based table correctly.