If you're unsure about my explanation, check out the video for a visual demonstration. Pay close attention to the cursor movements while I attempt to optimize my website for IE8. Hopefully there is a solution to this issue. Thank you in advance!
http://www.youtube.com/watch?v=V0wQGcZKTvc - See IE8 on the left and Chrome on the right
CSS
.toggle:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 5px;
z-index: 1;
}
.toggle:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 5px;
z-index: 1;
}
... (CSS code continues)
<p><strong>DOM</strong> </p>
<pre><code><div class="toggle ">
<div class="tshadow">
<h3># Explanation</h3>
<div class="tarrow rotate2"></div>
<div class="tdivider"></div>
<div class="toggle-cont">
<ol>
<li>sadasd</li>
<li>asd</li>
... (more list items)
</ol>
</div>
</div>
</div>
jQuery
$("#single-full-column div.tshadow h3").click(function(e) {
e.preventDefault();
$(this).parent().find($(".toggle-cont")).stop().slideToggle();
$(this).parent().find($(".tdivider")).stop().toggle("slow");
$(this).parent().find($(".tarrow")).stop().toggleClass("rotate1 rotate2");
});
..................................................................................