cvocvo
Reputation: 1636
Website Displays fine on Chrome/Firefox/IE 9+ but White Page on IE 8
I'm working on a page and I can't seem to figure out why it's not displaying on IE 8. If I right click and view source the page code is being loaded but the whole page just displays blank and white.
I can't seem to figure it out because it displays fine in Firefox, Chrome, and IE 9 and above. Anyone had this happen / can see what's wrong in my code?
Page: http://kozyheat.com
Code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kozy Heat Fireplaces</title>
<meta name="description" content="For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor.">
<meta property="og:site_name" content="Kozy Heat Fireplaces"/>
<meta property="og:title" content="Kozy Heat Fireplaces"/>
<meta property="og:description" content="For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor."/>
<meta property="og:image" content="http://kozyheat.com/img/desktop/facebooklogo.png">
<meta name="viewport" content="width=device-width">
<script src="/scripts/js/desktop/jquery-1.10.2.min.js"></script>
<script src="/scripts/js/desktop/bootstrap.min.js"></script>
<script src="/scripts/js/desktop/modernizr-2.6.2.min.js"></script>
<script src="/scripts/js/desktop/selectivizr-min.js"></script>
<link rel="stylesheet" href="/css/desktop/bootstrap.min.css">
<link rel="stylesheet" href="/css/desktop/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/css/desktop/font-awesome.min.css">
<link rel="stylesheet" href="/css/desktop/main.css">
<link rel="shortcut icon" href="/img/favicon/favicon.png">
<!--[if lte IE 9]>
<link rel="stylesheet" href="/css/desktop/main_ie8.css"/>
<![endif]-->
<script>
var backgroundInfo = [
{"imgURL": "/media/13631/dassel1.jpg", "URL": "product/dassel", "Name": "Dassel", "Description": "Keep the home fires burning with the Dassel gas fireplace. Numerous customizing options to fit any décor."},
{"imgURL": "/media/13660/northernfirelights2.jpg", "URL": "product/northern_firelights_patio_fireplace_table", "Name": "Northern Firelights Patio Fireplace Table", "Description": "What could be better than relaxing by, dining around or simply just enjoying the beauty of a patio fireplace table."},
{"imgURL": "/media/13624/bayport3.jpg", "URL": "product/bayport-l", "Name": "Bayport-L", "Description": "Our most popular 42” fireplace is now available in a Clean Face version. The Bayport-L offers a large and impressive viewing area with our most realistic logs and burner system yet. This fireplace is ordered in either the Log Set model or the Glass Media model."},
{"imgURL": "/media/13654/minnetonka3.jpg", "URL": "product/minnetonka", "Name": "Minnetonka", "Description": "The Minnetonka fireplace offers you a deeper firebox and an exterior-controlled "heat-dump" feature."}
];
$(window).load(function() {
updateBackground(1);
});
</script>
<script src="/scripts/js/desktop/main.js"></script>
<script>function detectMobile() {
var e = navigator.userAgent.toLowerCase();
var t = mobiles;
var n = false;
for (var r = 0; r < t.length; r += 1) {
if (e.indexOf(t[r]) != -1) {
n = t[r]
}
}
return n
}
$(function() {
if (detectMobile()) {
window.location.href = "http://kozyheat.com/mobile/"
}
});
var mobiles = ["midp", "240x320", "blackberry", "netfront", "nokia", "panasonic", "portalmmm", "sharp", "sie-", "sonyericsson", "symbian", "windows ce", "benq", "mda", "mot-", "opera mini", "philips", "pocket pc", "sagem", "samsung", "sda", "sgh-", "vodafone", "xda", "palm", "iphone", "ipod", "ipad", "android"]</script>
</head>
<body class="container-fluid">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8302527-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<div class="row-fluid">
<aside class="span3">
<a href="/" class="nostyle"><img id="logo" src="/img/desktop/logo.png" alt="Kozy Heat Fireplaces"></a>
<div class="fluid-row">
<div class="span10 offset1">
<h3>Our Story</h3>
<p>For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor.</p>
<a href="/about_us" class="btn btn-dark pull-right">Read More</a>
</div>
</div>
<div class="fluid-row">
<div class="span10 offset1">
<h3>Upgrade Today</h3>
<p>Ask us about our ways to upgrade your fireplace today with a SIT Proflame Remote control.</p>
<a href="/contact_us" class="btn btn-dark">Get Started</a>
</div>
</div>
</aside>
<div class="span9 clearMargin">
<nav class="row-fluid">
<a href="/about_us" class="btn btn-topnav">About Us</a>
<a href="/products" class="btn btn-topnav">Products</a>
<a href="/find_a_dealer" class="btn btn-topnav">Find A Dealer</a>
<a href="/support" class="btn btn-topnav">Support</a>
<a href="/architects_builders" class="btn btn-topnav">Architects & Builders</a>
<a href="/contact_us" class="btn btn-topnav">Contact Us</a>
</nav>
<section class="main clearfix">
<div class="box">
<div class="row-fluid" style="height:100%">
<section class="column">
<div id="imageRotator" class="row-fluid">
<span class="imgRotArrowLeft" onClick="updateBackgroundPrev();">‹</span>
<h2 id="imgRotName" class="clearMargin"></h2>
<p id="imgRotDesc"></p>
<a href="#" id="imgRotBtn" class="btn btn-light pull-right">Learn More</a>
<span class="imgRotArrowRight" onClick="updateBackgroundNext();">›</span>
</div>
</section>
</div>
</div>
</section>
<footer class="row-fluid">
<div class="span3">
<a class="nostyleW margR20" href="https://twitter.com/kozyheatfire" target="_blank"><i class="icon-twitter icon-3x"></i></a>
<a class="nostyleW margR20" href="https://www.facebook.com/KozyHeatFireplaces" target="_blank"><i class="icon-facebook icon-3x"></i></a>
<a class="nostyleW margR20" href="http://www.linkedin.com/company/2624342" target="_blank"><i class="icon-linkedin icon-3x"></i></a>
<a class="nostyleW margR20" href="http://www.youtube.com/user/KozyHeatFireplaces" target="_blank"><i class="icon-youtube icon-3x"></i></a>
</div>
<div class="span8">
<div class="row-fluid clearPadding" style="padding-bottom:5px;">
<a class="W" href="about_us">About Us</a> |
<a class="W" href="products">Products</a> |
<a class="W" href="find_a_dealer">Find a Dealer</a> |
<a class="W" href="support">Support</a> |
<a class="W" href="architects_builders">Architects & Builders</a> |
<a class="W" href="contact_us">Contact Us</a> |
<a class="W" href="dealers_login">Dealers Secured Area</a>
</div>
<div class="row-fluid clearPadding">
<strong>© 2013 Hussong MFG — 204 Industrial Park Drive / Lakefield, MN 56150 / <a class="W" href="tel:1-800-253-4904">800-253-4904</a></strong>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
Update:
I've made sure there's no caching (reset manually, set to reset on exit, and ran CCleaner). I've also reset all IE 8 settings via this Fixit: http://windows.microsoft.com/en-us/windows-vista/reset-internet-explorer-8-settings
Here's a screenshot of my issue: 
Upvotes: 0
Views: 3645
Answers (3)
cvocvo
Reputation: 1636
Okay I finally figured out the solution. Selectivizr was causing conflicts with font-face in IE 8 as detailed here: Why is selectivizr.js causing "white screen of death" in IE8?
So solution is to only give selectivzr to browsers that aren't IE 8...which is kind of counter-intuitive but it works for now.
Code:
<!--[if !IE 8]><!-->
<script src="/scripts/js/desktop/selectivizr-min.js"></script>
<!--<![endif]-->
Upvotes: 2
Accelerator
Reputation: 338
Cache is a big factor when updating a website and refreshing a lot to see if your updates worked. A lot of time you might be viewing old cache, which seems to be what the issue is here.
Clear your cache and delete all data. Close IE. Open again. Now it should work. Check here for instructions: http://kb.wisc.edu/page.php?id=12314
Make sure to regularly clear your cache when changing website code, otherwise you always run the risk where you thought you fixed something (or thought you didn't) but really you were only viewing old cache. This can cause problems so make sure to clear your cache frequently when updating your website.
p.s. your website looks really good. Kudos to you! :)
Upvotes: 0
Alexey Dmitriev
Reputation: 163
Change doctype to html 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Upvotes: 0
Related Questions
- Website Broken in IE8
- Website not loading in Internet Explorer 8, 9 or 10
- IE8 displaying page incorrectly
- Website works fine in all browsers, except IE8
- Website is broken in IE8
- Please help! IE8 is sometimes displaying my page correctly, sometimes not
- Website not appearing correctly in IE8
- Website displays badly in IE 8, but works fine in other browsers
- IE8 displays white page when adding Javascript
- IE8 Big Problem! Not displaying site properly