Take a look at this website () in Firefox, Chrome, Safari, and it works perfectly. Now try opening it in IE (7 or 8), and well, it doesn't quite cooperate :-). Feel free to check out the source code if you'd like, but here are the key details.
It seems that the array containing text for replacement is causing issues with other functionalities, specifically the moving divs not working as intended.
$('#menu ul li.home').addClass('active');
var msgs = [ "go here", "check this out", "maybe this one", "or even here" ];
var msgs_length = msgs.length;
$("#menu ul li a").click(function () {
$('#menu ul li.active').removeClass('active');
$(this).parent().addClass('active');
$('.go', this).text("you are here");
$("#menu ul li a").not(this).each(function(i) {
$('.go', this).text(msgs[i % msgs_length]);
});
});
Here's an excerpt from the menu:
<div id="menu">
<ul>
<li class="home"><a href="#home" class="panel">home / <span class="go">you are here</span></a></li>
<li class="clearfloats"></li>
<li class="about"><a href="#about" class="panel">about intra / <span class="go">go here</span></a></li>
<li class="clearfloats"></li>
<li class="cases"><a href="#cases" class="panel">projects / <span class="go">check this out</span></a></li>
<li class="clearfloats"></li>
<li class="photos"><a href="#photos" class="panel">photos / <span class="go">maybe this one</span></a></li>
<li class="clearfloats"></li>
<li class="contact"><a href="#contact" class="panel">contact / <span class="go">or even here<span></span></a></li>
</ul>
</div>
Can anyone spot the issue? I'm stumped as to why IE is misbehaving so much. It is IE after all, but still :-)