I have to admit I am COMPLETELY stumped on this one. I’ve been scouring the internet for a fix, but if this has already been addressed, I do sincerely apologize in advance.
I’m working on a website which needs to work perfectly in, at the very least, IE8. I’ve disabled some of the pretty stuff for IE6 and remember it working fine in all versions. Also works fine in Firefox, Chrome, and Safari. However, today, it just decided to BREAK. Here are the problems:
-
Page will simply not load in IE6, 7, or 8. My only guess is there is a script or something in the head that’s halting the browser. I’ve tried loading it after removing all scripts and links in the head, to no avail. It’s just a white page. How can I fix this?
-
When the page used to load, the top navigation was broken in all versions of IE. In Firefox, Chrome, or Safari, it was fine. Each link in the navigation is an
<li>, inside which is an<a>. When the user rolls over an<li>, the corresponding “spotlight” image below it would swap, via a custom bit of jquery. But now the link doesn’t even appear. -
For some reason, the images toward the bottom with little tabbed links in them are breaking. In their normal state, they are fine. Upon rollover the tab is meant to pop out a bit and change color. I have
border-radiusandbox-shadowon them, and am also using CSS3 pie on the container. However, on rollover, the corners turn black. It looks like a png not being displayed properly, but they’re made with CSS. This issue is not as pressing as getting basic page functionality back, as I could just revert to using images for this, but it’s also a heck of a head-scratcher.
In my office we are using IE9 natively on Windows 7, along with a program called IETester to pull up the site in the other versions. We have a rather old computer running IE6 natively as well, but the results are the same for all.
This project is getting close to deadline, so for it to just up and break like this is quite distressing. If anyone has any idea what went wrong here, please let me know. The site is being hosted at:
The page is put together with a php include for header.php and footer.php.
Just so you know what’s being linked in the header:
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" ></script>
<script src="js/libs/modernizr-2.0.6.min.js" type="text/javascript" ></script>
<script src="js/script.js" type="text/javascript" ></script>
<script src="js/plugins.js" type="text/javascript" ></script>
<script src="js/libs/PIE.js" type="text/javascript" ></script>
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Within style, reset and typography stylesheets are daisychained on via @import. They are inside the css directory as well.
Here is my header file, starting from the body tag:
<body>
<div id="wrapper">
<div id="header">
<div id="masthead"></div>
<ul class="nav">
<li class="nav_spacer_left"></li>
<a href="#" id="nav1"><li class="index"></li></a>
<a href="##" id="nav2"><li class="works"></li></a>
<a href="###" id="nav3"><li class="products"></li></a>
<a href="####" id="nav4"><li class="partners"></li></a>
<a href="#####" id="nav5"><li class="company"></li></a>
<a href="######" id="nav6"><li class="contact"></li></a>
<li class="nav_spacer_right"></li>
</ul>
<div id="lights">
<div class="nav_light" id="nav1_light"></div>
<div class="nav_light" id="nav2_light"></div>
<div class="nav_light" id="nav3_light"></div>
<div class="nav_light" id="nav4_light"></div>
<div class="nav_light" id="nav5_light"></div>
<div class="nav_light" id="nav6_light"></div>
</div>
</div><!--! end of #Header -->
<div class="clear"></div>
<div id="background">
<div class="shelf"></div>
<div class="content">
Here is the jQuery for the spotlights, very basic stuff:
/*
Spotlights
*/
$(document).ready(function() {
$('#nav1').hover(function() {
$('#nav1_light').addClass('nav_light_bright');
}, function() {
$('#nav1_light').removeClass('nav_light_bright');
});
$('#nav2').hover(function() {
$('#nav2_light').addClass("nav_light_bright");
}, function() {
$('#nav2_light').removeClass("nav_light_bright");
});
$('#nav3').hover(function() {
$('#nav3_light').addClass("nav_light_bright");
}, function() {
$('#nav3_light').removeClass("nav_light_bright");
});
$('#nav4').hover(function() {
$('#nav4_light').addClass("nav_light_bright");
}, function() {
$('#nav4_light').removeClass("nav_light_bright");
});
$('#nav5').hover(function() {
$('#nav5_light').addClass("nav_light_bright");
}, function() {
$('#nav5_light').removeClass("nav_light_bright");
});
$('#nav6').hover(function() {
$('#nav6_light').addClass("nav_light_bright");
}, function() {
$('#nav6_light').removeClass("nav_light_bright");
});
})
If asking people to dig around my code makes me a jerk, again, I sincerely apologize. I really appreciate anyone who is kind enough to help me out with this and want to say thank you in advance. If it’s all just some tiny little unclosed tag or something, rest assured I will be headdesking for at least ten minutes.
I was having problems posting the question, so instead of linking to the pages I included some of the script here. If you want to have a look at all of the css, it’s in the /css/ directory of the site I linked to earlier. Of course I can post more code here if needed.
Fixed it. It was a space generating above the doctype without me knowing! :-O