When hovering over the IE slideshow, it moves downward. Any suggestions on why this happens?
Visit development.legendarylion.com for more information.
Could someone provide insight on why the slideshow increases top margin when hovered over?
Explore the project at:
CSS
div#slideshow {
width: 947px; height: 554px;
overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
position: relative; z-index: 5;
}
ul#slides{margin: 0; padding: 0; border: 0;list-style-type:none;}
ul#nav {margin:0; padding:0;}
div#slideshow ul#nav {
display: none;
list-style: none;
position: relative; top: 250px; z-index: 15;
}
div#slideshow ul#nav li#prev {
float: left; margin: 0 0 0 20px;
}
div#slideshow ul#nav li#next {
float: right; margin: 0 20px 0 0;
}
div#slideshow ul#nav li a {
display: block; width: 20px; height: 37px; text-indent: -9999px;
}
div#slideshow ul#nav li#prev a {
background: url(../img/prev-b.png);
}
div#slideshow ul#nav li#next a {
background: url(../img/next-b.png);
}
div#slideshow ul#slides {
list-style: none;
}
div#slideshow ul#slides li {
margin: 0 0 20px 0;
}