Confounded IE - jQuery AnythingSlider

[doodlebee]

I had a quick question: I'm using the AnythingSlider [css-tricks.com] for a site I'm working on. iv'e used this several times on a few differen sites with no problem, but this one is confounding me. It's a simple 4-panel slider, and I've made some edits to the CSS file (typically I use a separate external file, and this is the first "static" site I've used it on) - and in IE8, when I hover over any link on the site, the panels shift to the last one. It's the most bizarre thing ever.

I have the site broken apart and using includes, so I'll just give you the pertinent HTML info:

<div class="anythingSlider">

<div class="wrapper">

<ul class="panel">
<li>
<h2>Upgrade your home network</h2>
<h4>Optimize. Manage. Diagnose.</h4>
<p>Plaster Networks brings powerline technology to the next level for connecting network devices in the home using your existing electrical wiring.</p>
<img src="images/network.gif" alt="" />
</li>

<li>
<h2>Best-in-industry diagnostics</h2>
<h4>Instantly view network status and performance.</h4>
<p>Track network statistics to verify consistent performance and throughput over time.</p>
<img src="images/diagnostics.png" alt="" />
</li>

<li>
<h2>"Rock solid performance. Can't get any easier! You can't go wrong with this product."</h2>
<span class="author"> - Amar C., Half-Moon Bay, CA</span>
<h5><a href=""><img src="images/addbutton.png" alt="Add to Cart" /></a>
<span>BUY 2 ADAPTERS for $179.90<br />
SAVE $30</span></h5>
</li>

<li>
<h2>"The PLN3 adapters worked great! Now I have a broadband connection from every room in the house."</h2>
<span class="author"> - Steve D., Camano Island, WA</span>
<h5><a href=""><img src="images/addbutton.png" alt="Add to Cart" /></a>
<span>BUY 2 ADAPTERS for $179.90<br />
SAVE $30</span></h5>
</li>
</ul>

<!--wrapper-->
</div>

<!--/anythingSlider-->
</div>

and the CSS:

.anythingSlider {
width:560px;
overflow:hidden;
height: 375px;
position: relative;
margin: 0 auto;
}

.anythingSlider .wrapper {
width: 560px;
overflow: auto;
height: 325px;
margin: 0;
position: absolute;
top: 0;
left: 0;
}

.anythingSlider .wrapper ul {
width:32700px;
list-style:none;
position:absolute;
top:0;
left:0;
}

#main ul.panel {
list-style:none;
margin:0;
}

#main ul.panel li, #main ul.panel p {
font-size:1em;
color:#959595;
}

.anythingSlider .wrapper li {
display:block;
float: left;
padding: 0;
height: 300px;
width: 560px;
margin: 0;
}

.anythingSlider .arrow {
display: block;
position:relative;
top:330px;
float:left;
height: 40px;
width: 20px;
background:url("images/arrows.gif") no-repeat 0 0;
cursor: pointer;
}

.anythingSlider .forward {
background-position: -885px -163px;
}
.anythingSlider .back {
background-position: -885px 0;
}

.anythingSlider .forward:hover {
background-position: 0 0;
}

.anythingSlider .back:hover {
background-position: -442px 0;
}

#thumbNav {
position: relative;
top: 330px;
z-index:100;
text-align:left;
height:30px;
float:left;
margin-right:5px
}

#thumbNav a, #thumbNav a:link, #thumbNav a:visited {
font: 0.6em Tahoma, "Trebuchet MS", Helvetica, sans-serif;
display:inline-block;
margin: 0 5px;
text-align: center;
text-decoration:none;
color:#707070;
font-weight:bold;
position:relative;
}

#thumbNav a:hover, #thumbNav a:active, #thumbNav a.cur {
color:#000;
text-decoration:underline;
}

/* reset so lists inside the slider panels will behave normally */
.anythingSlider .wrapper ul ul {
position: static;
margin: 0;
background: none;
overflow: visible;
width: auto; border: 0;
}

.anythingSlider .wrapper ul ul li {
float: none;
height: auto;
width: auto;
background: none;
}


Does anyone see any reason as to why it would do this? I just don't understand why hovering over links - and I mean ANY link on the site , even ones unrelated to this -would make the panels change lik they are. it's truly bizarre.

[Fotiman]

Is there some JavaScript that attaches the event somewhere? It seems strange that you would only see this in IE though. Can you post the JavaScript that attaches your events? Also, I just tried it using only the code you provided and adding a link before the .anythingSlider div, and it did not behave strangely in IE8 for me. Here is my test case (which is based on your example, but I've replaced the content with Lorem Ipsum text):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.anythingSlider { 
width:560px; 
overflow:hidden; 
height: 375px; 
position: relative; 
margin: 0 auto; 
} 
.anythingSlider .wrapper { 
width: 560px; 
overflow: auto; 
height: 325px; 
margin: 0; 
position: absolute; 
top: 0; 
left: 0; 
} 
.anythingSlider .wrapper ul { 
width:32700px; 
list-style:none; 
position:absolute; 
top:0; 
left:0; 
} 
#main ul.panel { 
list-style:none; 
margin:0; 
} 
#main ul.panel li, #main ul.panel p { 
font-size:1em; 
color:#959595; 
} 
.anythingSlider .wrapper li { 
display:block; 
float: left; 
padding: 0; 
height: 300px; 
width: 560px; 
margin: 0; 
} 
.anythingSlider .arrow { 
display: block; 
position:relative; 
top:330px; 
float:left; 
height: 40px; 
width: 20px; 
background:url("images/arrows.gif") no-repeat 0 0; 
cursor: pointer; 
} 
.anythingSlider .forward { 
background-position: -885px -163px; 
} 
.anythingSlider .back { 
background-position: -885px 0; 
} 
.anythingSlider .forward:hover { 
background-position: 0 0; 
} 
.anythingSlider .back:hover { 
background-position: -442px 0; 
} 
#thumbNav { 
position: relative; 
top: 330px; 
z-index:100; 
text-align:left; 
height:30px; 
float:left; 
margin-right:5px 
} 
#thumbNav a, #thumbNav a:link, #thumbNav a:visited { 
font: 0.6em Tahoma, "Trebuchet MS", Helvetica, sans-serif; 
display:inline-block; 
margin: 0 5px; 
text-align: center; 
text-decoration:none; 
color:#707070; 
font-weight:bold; 
position:relative; 
} 
#thumbNav a:hover, #thumbNav a:active, #thumbNav a.cur { 
color:#000; 
text-decoration:underline; 
} 
/* reset so lists inside the slider panels will behave normally */ 
.anythingSlider .wrapper ul ul { 
position: static; 
margin: 0; 
background: none; 
overflow: visible; 
width: auto; border: 0; 
} 
.anythingSlider .wrapper ul ul li { 
float: none; 
height: auto; 
width: auto; 
background: none; 
} 
</style>
<title>anythingSlider test</title>
</head>
<body>
<a href="#">Foo</a>
<div class="anythingSlider"> 
  <div class="wrapper"> 
    <ul class="panel"> 
      <li> 
        <h2>Egestas a nisi et pellentesque.</h2> 
        <h4>Adipiscing ut massa velit.</h4> 
        <p>
          Magna lorem diam eu, odio proin cras diam
          tempor porta, dapibus et! Vel aliquam massa
          tortor lectus etiam ridiculus in.
        </p> 
        <img src="images/network.gif" alt="" /> 
      </li> 
      <li> 
        <h2>Porttitor, non egestas a.</h2> 
        <h4>Et integer mus non.</h4> 
        <p>
          A nunc magna, a integer, enim, amet dapibus
          facilisis, a ridiculus aenean massa turpis
          sagittis magna aliquet, porttitor vut.
        </p> 
        <img src="images/diagnostics.png" alt="" /> 
      </li> 
      <li> 
        <h2>"Porta amet nunc! Parturient."</h2> 
        <span class="author"> - Nisi a porta a.</span> 
        <h5><a href=""><img src="images/addbutton.png" alt="Add to Cart" /></a> 
          <span>BUY 2 ADAPTERS for $179.90<br /> 
          SAVE $30</span></h5> 
      </li> 
      <li> 
        <h2>"Adipiscing tristique tristique non."</h2> 
        <span class="author"> - Phasellus, lundium magna ut.</span> 
        <h5><a href=""><img src="images/addbutton.png" alt="Add to Cart" /></a> 
          <span>BUY 2 ADAPTERS for $179.90<br /> 
          SAVE $30</span></h5> 
      </li> 
    </ul> 
  <!--wrapper--> 
  </div> 
<!--/anythingSlider--> 
</div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/tests/AnythingSlider/js/jquery.anythingslider.js"></script>
<script type="text/javascript">
$('.anythingSlider').anythingSlider({
  easing: "swing",
  autoPlay: false,
  startStopped: false,
  delay: 3000,
  animationTime: 600,
  hashTags: true,
  buildNavigation: true,
  pauseOnHover: true,
  startText: "Start",
  stopText: "Stop",
  navigationFormatter: null
});
</script>
</body>
</html>

[doodlebee]

Thanks Fotiman. I actually looked for this post this morning to reply with what i found, and I couldn't find it anywhere (it wasn't even in my control panel - I thought it'd been deleted for some reason)! So thanks for replying so I could find it.

Turns out it's just me.

I know when you run standalone versions of IE on windows, it's a little bit buggy - for example, many times you won't be able to select form fields and such. However *actual* users of IE don't see these buggy issues.

From what I can gather, this is what the problem was. I had a few colleagues who run Windows boxes check the site in IE - none of them saw the issue. So apparently it's some bug that came about due to my use of VMWare on a Mac (to run Windows) and my use of standalones. As long as I'm the only one having the issue (due to my development setup) then I'm fine with it :)

But thanks again for giving it a shot!

[Fotiman]

Ok, good. :)