jQuery Coda Slider IE 6,7 Crashing when switching tabs...I hate IE...

Question

First off, I would just like to mention my absolute hatred of Internet Explorer and the grief it is causing me.

Okay, so I have am using a Coda slider for a clients website, located at: www.onlineuticacollege.com/david

Here is my declarations for my Coda Slider.

<script src="tabbed-bottom-nav/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="tabbed-bottom-nav/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="tabbed-bottom-nav/js/jquery.coda-slider-2.0.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('div#coda-slider-1').codaSlider({
dynamicArrows: false,
autoHeight: false
});
});
</script>

My actual coda slider tabs are way too huge to fit in a post, so here's a link to a pastebin of it: http://pastebin.com/m6f250b9d

But here is the general layout:

<div class="panel"><!--Begin Contact Us: panel-->
<div class="panel-wrapper"> 
<h2 class="title">Tab Name</h2>
<p>Some text goes here</p>
<p>More text here.</p>
<div class="panelNavigation">
<a class="xtrig left" href="#4" rel="coda-slider-1" title="Go To Previous">&#171; Previous</a>
<a class="center" href="contact-us/contact.asp" title="Learn More">Learn More</a>
<a class="xtrig right" href="#1" rel="coda-slider-1" title="Go To Next">Next &#187;</a>
</div>
</div>
</div><!--End Contact Us: panel-->

Now, all of this sometimes works perfectly fine in IE 6,7 except if you switch between the tabs really fast, other times it completely crashes when switching to your first tab...

Any help or suggestions are GREATLY appreciated.

p.s. I hate internet explorer...

[edit] I have gotten it working perfectly on IE 7 somehow...now for IE 6.

Answer 1

Not sure if this has anything to do with it, but in looking at their documentation, elements referenced by IDs don't need the element type declared before them. As a side note, this sounds like a bug in the codaSlider library. The whole point of a JS library is to use one syntax convention, while the library handles cross-browser implementation.

What if you change:

$('div#coda-slider-1').codaSlider

to

$('#coda-slider-1').codaSlider

Answer 2

So this is a rather complex problem, I have finally fixed it for both IE 6 and IE 7.

What I ended up doing was just completely remaking the tabs again, which yielded good results with it mostly functioning for IE 7, but now it left IE 6 crashing. So, I have found out that all versions of IE do not play well with anything withing the tabs having 100% width or an absolute width that fits the largest amount possible within the tabs (ex. You have a tab that's 600 pixels in width with 5px of padding on each side, you cannot have a div that is 550px or larger for the width, this also applies to the height)

In addition if you have multiple divs floating that come close to equaling the width/height - padding/margin when added together it will crash IE 6, but not IE 7.

In the end I had to use tables to arrange two of the different elements. I didn't necessarily want to use tables for it, but it did accomplish the look and the functionality, so I am glad for that.

Hopefully, this can help someone else later on.