Please find below my css for the slideshow used on my website. I noticed two problems in IE (I am using v 8). When the slideshow starts, the first pager box doesn't become the 'active' one. It is as if the first 'active' pager box starts prior to the five pager boxes I have. This is confirmed as when the last slide is shown, in my case the fifth picture, none of the pager boxes has the 'active' state. Also, when I hover over one of the pagers, two pagers get the 'active' state. Any help would be greatly appreciated. I did make a conditional statement that changes my 'nav li' if the browser is internet explorer. It wasn't recognizing line-height as worked fine in other browsers so I just added a class that changed the top margin of the pager. Thank you for any insight into this frustrating problem. A link to my test site is
www.nasharch.com/test/indexTEST.php
#nav {background:black;margin:0;width:1000px;
height:18px;padding:0;}
#nav a {font-size:4px;}
#nav li {float:left;display:inline;margin:0;padding:0;line-height:10px;}
#nav li .ie {float:left;display:inline;margin:7px 0;padding:0;}
#nav li a {margin:0px 3px;padding:2px;border: 1px solid rgb(244,144,30);color:black;
text-decoration: none;}
#nav li.activeSlide a {background:rgb(244,144,30);color:rgb(244,144,30);}
#nav li a:hover {background:rgb(244,144,30);color:rgb(244,144,30);cursor:pointer;}
#nav li a:focus {border:1px solid rgb(244,144,30);}
#prev {padding:2px;margin:0 0 2px 10px;
color:rgb(244,144,30);font-size:80%;float:left;cursor:pointer;}
#next {padding:2px;margin:0 10px 2px 0;
color:rgb(244,144,30);font-size:80%;float:left;cursor:pointer;}
#play-control {padding:2px 0 3px 0;margin:0 0 3px 0;color:rgb(244,144,30);
float:left;cursor:pointer;font-size:80%;}
#slideshow {position:relative;overflow:hidden;}
#slideshow:hover {cursor:pointer;}
.pics {
width:1000px;
height:500px;
padding:0;
margin:0;
top:0px;
}
.pics img {
width:1000px;
height:500px;
top:0;
left:0;
}