For some reason it appears that respond JS isn't working. I am using Media Queries in IE 8 to change background images for various size monitors. In IE 8 there is no background, just a solid color.
The code looks like this:
<!--[if lt IE 9]> <script type="text/javascript" src="/js/html5-shiv.min.js"></script> <script type="text/javascript" src="/js/respond.min.js"></script> <![endif]-->
The Media Query looks like this:
@media (min-width:769px) and (max-width:1366px){ html, body{ background: url(/images/backgrounds/1366-bg.jpg) no-repeat center top fixed #190303; background-size:100% auto; } }
Is there a reason the above code would not work in IE 8? Is there another JS that I should try to use to make IE 8 Media Queries Work?
Note: It appears that the html5-shiv does work. I am testing on a live web server.
Same problem. I found out it's my loading sequence problem, because I write CSS inline and then I call respond js script, so it looks like
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
It should be
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="js/respond.min.js"></script>
ALWAYS link stylesheets or write inline CSS before js scripts!
It could be because you're hosting your CSS on a subdomain or CDN.
Respond.js works by requesting a pristine copy of your CSS via Ajax, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With