CSS problem? Easyslider 1.7(in Wordpress)stops working in FF but not IE

Hi, and sorry for this double post.(Posted it in Javascript with no replies) Wasnt sure where to post it for help on the matter.

I am working on a Wordpress installation of a site on my localhost site(wamp server). I have implemented Easyslider 1.7 for the faq questions and all seemed to be working fine. In Firefox after some time the easyslider stops working and goes well off the screen. In IE it seems to be working fine with no problems and on Chrome the problem hardly happens. At the beginning I thought it was the easylider but I was told its the CSS that is causing the problem. Below is my code:

<div id="footer"><!--Footer Start-->
       <div class="footwrap"><!--FooterWrap Start-->
                 
                 <div class="column"><!--Footfaq Start-->
                      <h3>Frequently Asked Questions</h3>
                    <div id="faq">
                    <ul>
                           <li><a href="#">Question 1</a></li>
                           <li><a href="#">Question 2</a></li>
                           <li><a href="#">Question 3</a></li>
                           <li><a href="#">Question 4</a></li>
                           <li><a href="#">Question 5</a></li>
                        </ul>
                    </div>
                  </div><!--Footfaq End-->
               
         </div><!--FooterWrap End-->
    </div><!--Footer End-->

And this is the CSS for it:

#footer .footwrap{
       width:1000px;
       margin:0 auto;
    }
    #footer .column h3{
       font: 120% Georgia, "Times New Roman", Times, serif;
       color: #f4f4f4;
       border-bottom: thin #f4f4f4 solid;
       padding-top: 10px;
       text-indent: 5px;
    }
    #footer p {
       padding: 15px 0;
       font-size: 1.1em;
    }
    #footer .column{
       width: 310px;
       float: left;
       padding: 10px 15px 0px 0px;
       position: relative;
       height: 200px;   
    }
    #footer .column ul{
       padding: 0px;
       margin: 10px 0px;
       list-style-type: none;
       color: #f4f4f4;
       font-size: 1.1em;
       line-height: 1em;
    }
    #footer .column ul li{
       margin-bottom: 5px;
    }
    #footer .column #faq {
       width: 300px;
       height: 130px;
       position: relative;
       overflow: hidden;
       margin: 5px 0 0 5px;
       text-align: center;
    }
    #footer .column #faq li {
       width: 300px;
       height: 130px;
       position: relative;
       overflow: hidden;
       font: italic 1em/1.6em Georgia, "Times New Roman", Times, serif;
    }
    #footer .column #faq p {
       position: absolute;
       top: 10px;
       padding: 0;
       margin: 0px;
       font-size: 0.9em;
       color: #f4f4f4;
    }

Is there something wrong with my CSS code? Its all validated with no errors. If anyone help me out or point me in the right direction because I am really stuck.

Thanks

thanks for your help. I changed the jquery library to 1.4.2 and it seems to have done the trick. I will give it more testing tomorrow and let you know how it goes.

I just happened t have jQuery version 1.4.2 on my desktop, so used that, and couldn’t see any problem in Firefox for Mac.

1.4.2? It works fine just sometimes it goes off screen and a scroll bar appears at the bottom of the scree. The problem happens mostly in Firefox. Internet explorer is fine.

I put your code together and tested it (with 1.4.2) and it worked fine. Is the problem happening in a particular browser?

I have stripped everything and tested it on the original version of the easyslider. My implementation works fine. The problem is(as with the original easyslider 1.7 without editing it) that as soon as I put it and view it through my wamp server or an online server the problem appears. If I display the page outside the server it works with no problems but in a server enviroment the problem appears, the slider goes off screen and the page needs to be refreshed to display properly. Anyone know how to help?

Do you want me to take out all the css aswell and leave only the css concerning the slider?

Hi, on one of my other pages I have two instances of the slider. I will try it now and let you know

Hi, I have stripped everything completly and left the following html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if IE]><meta http-equiv="MSThemeCompatible" content="no"><![endif]-->
<title>Website 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easyslider.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$("#faq").easySlider({
				controlsShow:	false,
				auto: true
			});
		});
</script>
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
</head>
<body>
<div id="wrap">

</div>
<div id="footer"><!--Footer Start-->
	<div class="footwrap"><!--FooterWrap Start-->
          	 <div class="column"><!--Footfaq Start-->
               	<h3>Frequently Asked Questions</h3>
                <div id="faq">
    	             <ul>
                       <li><p><a href="#">Question 1:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 2:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 3:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 4:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 5:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
	                 </ul>
                </div>
              </div><!--Footfaq End-->           
     </div><!--FooterWrap End-->
</div><!--Footer End-->

</body>
</html>

And the following css only:

#wrap {
	min-height: 100%;
	width:1000px; 
	margin:0 auto;
}
#footer .footwrap{
	width:1000px;
	margin:0 auto;
}
#footer .column h3{
	font: 120% Georgia, "Times New Roman", Times, serif;
	color: #f4f4f4;
	border-bottom: thin #f4f4f4 solid;
	padding-top: 10px;
	text-indent: 5px;
}
#footer p {
	padding: 15px 0;
	font-size: 1.1em;
}
#footer .column{ 
	width: 310px; 
	float: left; 
	padding: 10px 15px 0px 0px; 
	position: relative; 
	height: 200px;   
}
#footer .column h4{ 
	color: #f4f4f4; 
	font-size: 1.4em; 
	text-shadow: #222 1px 0px 1px; 
}
#footer .column ul{ 
	padding: 0px; 
	margin: 10px 0px; 
	list-style-type: none; 
	color: #f4f4f4; 
	font-size: 1.1em; 
	line-height: 1em; 
}
#footer .column ul li{ 
	margin-bottom: 5px; 
}
#footer .column #blog ul li{
	padding: 10px 0 0 5px;
	font-size: 1em;
	color: #f4f4f4;
	font-weight:lighter;
}
#footer .column #faq { 
	width: 300px; 
	height: 130px; 
	position: relative; 
	overflow: hidden; 
	margin: 5px 0 0 5px; 
	text-align: center; 
}
#footer .column #faq li { 
	width: 300px; 
	height: 130px; 
	position: relative;  
	overflow: hidden; 
	font: italic 1em/1.6em Georgia, "Times New Roman", Times, serif;
}
#footer .column #faq p { 
	position: absolute; 
	top: 10px; 
	padding: 0; 
	margin: 0px; 
	font-size: 0.9em; 
	color: #f4f4f4; 
}
#footer {
	position: relative;
	margin-top: -320px; /* negative value of footer height */
	height: 320px;
	clear:both;
	background:#1a1a1a url("../images/footerbg.png") repeat-x;
} 
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

And still I have the same problem.Is the positioning on certain elements causing the problem?

May I ask what this is?


$("#srv-btm").easySlider({
			    numeric: true,
				continuous: false
			});

because I can’t find the srv-btm anywhere back in you document. Another thing did you try the slider stand alone just with the jQuery library and the css for the slider

Hi and thanks for the reply. Here is the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if IE]><meta http-equiv="MSThemeCompatible" content="no"><![endif]-->
<title>Website 1</title>
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="/cmp_jq.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$("#faq").easySlider({
				controlsShow:	false,
				auto: true
			});
			$("#srv-btm").easySlider({
			    numeric: true,
				continuous: false
			});
		});
</script>
<link rel="stylesheet" href="/cmp_reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/compressed_css.css" type="text/css" media="screen" />
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
</head>
<body>
<div id="wrap"><!--Wrapper Start-->
	<div id="main"><!--Main Start-->
		    <div id="header"><!--Header Start-->
             	<div id="logo"><!--Logo Start-->
                     <div id="logotxt"><!--LogoTXT Start-->
                          <a href="#"><img src="/images/logo6.png" alt="Logo" /></a>
                     </div><!--LogoTXT End-->
                     <div id="logoinfo"><!--LogoINFO Start-->
                          <a href="#"><img src="/images/email.png" alt="Email" /></a>

                     </div><!--LogoINFO End-->
              	</div><!--Logo End-->
              	<div id="nav"><!--Navigation Start-->
                  	<div class="navwrap">
                    	<ul>
                              <li><a id=home href="#" >home</a></li>
                              <li><a id=about href="#">about</a></li>
                              <li><a id=webdesign href="#">webdesign</a></li>
                              <li><a id=portofolio href="#">portofolio</a></li>
                              <li><a id=contact href="#">contact</a></li>                	
                        </ul>
                   </div>
              </div> <!--Navigation End--> 
          </div><!--Header End-->
<div id="content"><!--Content Start-->
             <div id="topbox"><!--Topbox Start-->
             	<p class="maina">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
             </div><!--Topbox End-->
             <div id="centerbox"><!--Centerbox Start-->
             	<p class="mains">Pellentesque fermentum placerat metus id luctus. Suspendisse tincidunt, tortor convallis elementum auctor, arcu nisl fermentum diam, vitae iaculis leo libero sit amet nulla. Morbi ac massa quam, id euismod arcu. </p>        
             </div><!--Centerbox End-->
              <div id="centerbig"><!--centerbig Start-->
                 <h1>Lorem ipsum</h1>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum placerat metus id luctus. Suspendisse tincidunt, tortor convallis elementum auctor, arcu nisl fermentum diam, vitae iaculis leo libero sit amet nulla. Morbi ac massa quam, id euismod arcu. Vivamus felis quam, pretium at consequat in, pretium sed nibh. Suspendisse potenti. Aenean et justo fermentum felis posuere accumsan. </p>
             </div><!--centerbig End-->       
          </div><!--Content End-->
	</div><!--Main End-->
</div><!--Wrapper End-->
<div id="footer"><!--Footer Start-->
	<div class="footwrap"><!--FooterWrap Start-->
          	<div class="column"><!--Footloc Start-->
                  <h3>Find us on</h3>
                  <p class="twitter"><a href="#">Twitter </a></p> 
                  <p class="facebook"><a href="#">Facebook </a></p>
                  <p class="linkedin"><a href="#">Linkedin </a></p>
             </div><!--Footloc End-->
             <div class="column"><!--Footblog Start-->
                  <h3 class="rss">Latest Blog Entries</h3>          
                  <div id="blog">
      	                 	  <ul>
				   	           	<li><a href="#" rel="bookmark" title="Blog 1">Blog 1</a></li>
                   	            <li><a href="#" rel="bookmark" title="Blog 2">Blog 2</a></li>
                 	            <li><a href="#" rel="bookmark" title="Blog 3">Blog 3</a></li>
                   	          </ul>
                  </div>
              </div><!--Footblog End-->
              <div class="column"><!--Footfaq Start-->
               	<h3>Frequently Asked Questions</h3>
                <div id="faq">
    	             <ul>
                       <li><p><a href="#">Question 1:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 2:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 3:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 4:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
                       <li><p><a href="#">Question 5:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
	                 </ul>
                </div>
              </div><!--Footfaq End-->
            <div id="sitemap"><!--Sitemap Start-->
           		<img src="/images/footerline.png" width="1000px" alt="" />  
                <div class="footlogo"><!--Footlogo Start-->
                	<a href="#"><img src="/images/footlogo.png" alt="Logo" /></a>
                </div><!--Footlogo End-->
                <ul class="footnav">
                  	<li class="page_item page-item-5"><a href="#" title="home">home</a></li>
                    <li class="page_item page-item-7"><a href="#" title="about">about</a></li>
                    <li class="page_item page-item-9"><a href="#" title="webdesign">webdesign</a></li>
                    <li class="page_item page-item-11"><a href="#" title="portofolio">portofolio</a></li>
                    <li class="page_item page-item-13"><a href="#" title="contact">contact</a></li>
                </ul>
                <div class="copyright"><!--Copyright Start-->
                        Copyright &copy; 2010.All Rights Reserved.
                </div><!--Copyright End-->
          </div><!--Sitemap End-->
     </div><!--FooterWrap End-->
</div><!--Footer End-->
</body>
</html>

Here is my styles css code:

* {
	margin:0;
	padding:0;
} 
html, body {
	height: 100%;
	background:#ffffff url("../images/bodybg12.png") repeat-x;
}
h1,h2,h3,h5{
	font: italic lighter 26px Helvetica, sans serif;
	/*color: #0E7CA3;*/
	color: #259ecd;
	background:url(../images/headline.png) no-repeat left 50px;
	z-index:0;
}
h1{
	padding: 15px;
	font-size: 28px;
}
h2{
	padding: 15px 15px 10px 20px;
}
h5{
	font-size: 14px;
	padding-left: 20px;
}
p{
	font: italic 12px Verdana, Geneva, sans-serif;
	color: #333333;
}
img {
	border-style: none;
}
a,  a:visited {
	text-decoration: none;
	color: #00A5F8;
}
a:hover, a:active{
	text-decoration: underline;
}
#wrap {
	min-height: 100%;
	width:1000px; 
	margin:0 auto;

}
/*		HeadLogo		*/
#logotxt{
	float: left;
	padding-top: 17px;
	
}
#logoinfo{
	float: right;
	padding: 70px 40px 0 0;
}
/*			HeadNav			*/
#nav{
	height: 49px;
	clear: both;
}
#nav .navwrap{
	width: 800px;
	margin: 0 auto;
}
#nav ul{
	 display: block;
	 list-style-type: none;
     margin: 0;
     padding: 0;
	 text-indent:-9999px;
}
#nav ul li{display:inline;}
#nav a{
	background:url(../images/massivemenu9.png) no-repeat -177px 0px;
	display:block;
	float: left;
	width: 130px;
    height: 49px;
}
#nav a:hover, #nav a.active{background-position: -177px bottom;}
#nav a:active{background-position: -177px -49px;}
#nav a#about {background-position:-307px 0px;}
#nav a#about:hover, #nav a#about.active{background-position: -307px bottom;}
#nav a#about:active{background-position: -307px -49px;}
#nav a#webdesign {background-position:-437px 0px;}
#nav a#webdesign:hover, #nav a#webdesign.active {background-position: -437px bottom;}
#nav a#webdesign:active{background-position: -437px -49px;}
#nav a#portofolio {background-position:-567px 0px;}
#nav a#portofolio:hover, #nav a#portofolio.active {background-position: -567px bottom;}
#nav a#portofolio:active{background-position: -567px -49px;}
#nav a#contact {background-position:-697px 0px;}
#nav a#contact:hover, #nav a#contact.active {background-position: -697px bottom;}
#nav a#contact:active{background-position: -697px -49px;}
/*		Content		*/
#content{
	float:left;
	padding: 10px 20px 0px 20px;
}
#topbox, centerbox, #centerbig, #bottombox{
	padding: 5px 0;
}
/*		Left	*/
#left{
	float: left;
	padding: 5px 0 10px 0; 
	width: 481px;
}
#left h3{padding-top: 15px;}
#left input, #left textarea {
	padding: 5px;
	width: 350px;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 1px solid #c4c3c3;
}
#left .formstyle{background:url(../images/formtxtbg.png) no-repeat left bottom;}
#left textarea {
	height: 90px;
	background:url(../images/formtxtarea.png) no-repeat left bottom;
}
#left textarea:focus, #left input:focus {
	border: 1px solid #00ccff;
}
#left input.submit-button {
	float: right;
	background:#ffffff url(../images/enquiry.png) no-repeat right;
  	border:none;
	padding: 5px;
	text-indent: -9999px;
	margin-right: 30px;
}
#left label {
	float: left;
	text-align: right;
	width: 70px;
	font-size: 14px;
	color: #646464;
}
/*	Right	*/
#right{
	float:right;
	padding: 5px 0 10px 0;
	width: 453px;
}
/*	Centerbig	*/
#centerbig p{
	padding: 10px 40px 10px 20px;
	line-height: 20px;
}
#centerbig h2.qed { 
	padding: 0 0 0 16px; 
	margin: 0 0 5px 5px; 
	background: url(../images/faqstyle2.png) no-repeat left 0px; 
	height: 41px; 
	line-height: 40px; 
	width: 700px; 
	font-size: 1.1em; 
	font-weight: normal; 
	float: left; 
}
#centerbig h2.qed a { 
	color: #666; 
	text-decoration: none; 
	display: block; 
	outline: none; 
}
#centerbig h2.qed a:hover { 
	color: #258093; 
}
#centerbig h2.active { 
	background-position: left -40px; 
} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container { 
	margin: 0 0; 
	padding: 0; 
	background: #FFF left top; 
	overflow: hidden; 
	font-size: 1.2em; 
	width: 700px; 
	clear: both; 
	float:left; 
	border:none; 
}
.toggle_container .block { 
	padding: 5px 20px; /*--Padding of Container--*/ 
	background: no-repeat left bottom #FFF; /*--Bottom rounded corners--*/ 
}
.toggle_container .block p { 
}
.toggle_container .block span { 
	font-size:1em!important; 
}
/*	Bottombox	left	*/
#bottomboxleft{
	float: left;
	padding: 5px 0 10px 0;
	width: 631px;
}
#bottomboxleft p{
	padding: 10px;
	line-height: 25px;
}
/*Bottombox right	*/
#bottomboxright{
	float:right;
	padding:5px 0 10px 0;
	width: 303px;
	background:url(../images/quotebg4.png) no-repeat;
}
#bottomboxright p{
	padding: 30px 10px 10px 40px;
}
#bottomboxright input, #bottomboxright textarea {
	width: 225px;
	font: 12px Helvetica, sans-serif;
	margin: 0px 0px 10px 0px;
	border: 1px solid #c4c3c3;
}
#bottomboxright textarea{height: 90px;}
#bottomboxright textarea:focus, #bottomboxright input:focus {border: 1px solid #00ccff;}
#bottomboxright input.submit-button {
	width: 86px;
	float: right;
	margin-right: 25px;
	background:url(../images/submitbtn.png) no-repeat;
   	color: #ffffff;
	border:none;
	padding: 2px 10px 10px 10px;
	font-size: 14px;
	font-style: italic;
}
label {
	float: left;
	text-align: right;
	width: 50px;
	font-size: 1.4em;
	padding: 0 10px 0 5px;
}
/* Column */
#topcolumn{
	width: 945px;
	background:url(../images/headline.png) no-repeat left 50px;
  	margin-bottom: 10px;
}
#leftcolumn{
	float: left;
	width: 465px;
	background:url(../images/headline.png) no-repeat left 60px;
   	margin-bottom: 10px;
}
#rightcolumn{
	float: right;
	width: 465px;
	background:url(../images/headline.png) no-repeat left 60px;
   	margin: 0 15px 0 10px;
}
#bottomcolumn{
	float:left;
	width: 945px;
	background:url(../images/headline.png) no-repeat left 60px;
   	margin-bottom: 10px;
}
/*#topcolumn h2{padding: 25px 15px 10px 20px;}*/
#leftcolumn h2{padding: 25px 15px 10px 20px;}
#rightcolumn h2{padding: 25px 15px 10px 20px;}
#bottomcolumn h2{padding: 25px 15px 10px 20px;}

/*	Services	*/
#srv{
	background:url(../images/layoutservicesspritev5.png) no-repeat -1px 0;
	height: 280px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 945px;
}
#srv-btm{
	float: right;
	height: 280px;
	width: 738px;
}
#srv-btm ul{
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 20px;
}
#srv-btm ul li{
	float: left;
	height: 280px;
	width: 738px;
}
#srv-btm .top{
	background: url(../images/servicesweb.png) no-repeat right;
	padding: 35px 0 0 5px;
	width: 489px;
}
#srv-btm .top h3{
	padding: 0;
	font-size:1.1em;
	font-style: normal;
}
#srv-btm .top span{
	color: #6a6a6a;
	display: block;
	font-size: 1.4em;
	padding-bottom: 14px;
}
#srv-btm .top.loptimize{background-image: url(../images/servicesoptimize2.png);}
#srv-btm .top.lecommerce{background-image: url(../images/servicesecommerce.png);}
#srv-btm .top.lcontact{background-image: url(../images/servicescontact.png);}
#srv-btm .btm{
	background: url(../images/serviceswebicons2.png) no-repeat;
	height: 180px;
	padding: 0 0 0 5px;
	width: 738px;
}
#srv-btm .btm ol{
	list-style-type: none;
	margin: 0;
	padding: 6px 0 0;
}
#srv-btm .btm li{
	font-size: 0.8em;
	height: 32px;
	margin: 0;
	padding: 5px 0px 0 60px;
	text-shadow: 1px 1px 1px #FFFFFF;
	width:285px;
	color: #646464;
}
#srv-btm .btm.optimize{background-image: url(../images/servicesoptimizeicons2.png);}
#srv-btm .btm.ecommerce{background-image: url(../images/servicesecommerceicons.png);}
#srv-btm .btm.contact{background-image: url(../images/servicescontactinfo3.png);}
#srv-btm #message{
	display: block;
	margin: 0 auto;
	padding-top: 40px;
	text-align: center;
	width: 280px;
}
ol#control{
	float: left;
	height: 295px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 207px;
	
}
ol#control li a{
	background-image: url(../images/servicesspritev2.png);
	display: block;
	text-decoration: none;
	height: 70px;
	width:207px;
}
ol#control li.current a, ol#control li.current a:hover{
	background-position: -207px 0;
	cursor: default;
}
ol#control li a:hover{background-position: -414px 0;}
ol#control li a:active{background-position: -621px 0;}
ol#control li#control2 a{
	background-position: 0px -70px;
	height: 70px;
}
ol#control li#control2.current a, ol#control li#control2.current a:hover{background-position: -207px -70px;}
ol#control li#control2 a:hover{background-position: -414px -70px;}
ol#control li#control2 a:active{background-position: -621px -70px;}
ol#control li#control3 a{
	background-position: 0px -140px;
	height: 70px;
}
ol#control li#control3.current a, ol#control li#control3.current a:hover{background-position: -207px -140px;}
ol#control li#control3 a:hover{background-position: -414px -140px;}
ol#control li#control3 a:active{background-position: -621px -140px;}
ol#control li#control4 a{
	background-position: 0px -210px;
	height: 70px;
}
ol#control li#control4.current a, ol#control li#control4.current a:hover{background-position: -207px -210px;}
ol#control li#control4 a:hover{background-position: -414px -210px;}
ol#control li#control4 a:active{background-position: -621px -210px;}
#srv input, #srv textarea {
	width: 200px;
	font: 0.8em Helvetica, sans-serif;
	margin: 0px 0px 5px 0px;
	border: 1px solid #c4c3c3;
}
#srv .formstyle{background:url(../images/formtxtbg.png) no-repeat left bottom;}
#srv textarea {
	height: 90px;
	background:url(../images/formtxtarea.png) no-repeat left bottom;
}
#srv textarea:focus, #srv input:focus {
	border: 1px solid #00ccff;
}
#srv input.submit-button {
	background:url(../images/enquirybtnsmall2.png) no-repeat;
    width: 151px;
	height: 69px;
	border:none;
	text-indent: -9999px;
}
#srv label {
	float: left;
	text-align: right;
	width: 56px;
	font-size: 12px;
	color: #646464;
}
/* Blog */
.blogwrap{
	width:950px;
	overflow:hidden;
	margin: 0 auto;
}
#postwrap{
	float:left;
	width: 750px;
}
#postwrap h3{
	font-style: normal;
}
#sidebar{
	float:right;
	width: 150px;
	border: 1px solid #B1DDFF;
	background-color: #E2F2FF;
	padding: 0 20px;
	margin-top: 15px;
}
#sidebar h2{
	font-style: normal;
	padding: 0;
	background-image: none;
	border-bottom: 1px solid #B1DDFF;
}
.apost{
	padding: 10px 0 0 15px;
}
.more-link{
	padding-left: 20px;
}
.widget{
	padding: 10px 0;
}
blockquote p{
	margin-bottom: 0.5em;
}
#post p{
	font-style: normal;
	line-height: 1.4em;
}
.meta {
	color: #999999;
	display: block;
	font-size: 0.9em;
	margin-bottom: 10px;
	padding: 5px 0 0 20px;
}
cite{
	color: #999999;
}
small {
	font-size: 0.8em;
	line-height: 1.5em;
}
#commentbox{
	background-color: #E2F2FF;
	border: 1px solid #B1DDFF;
	padding: 10px;
	width: 550px;
	margin-top: 5px;
}
#respond label{
	float: left;
	text-align: right;
	width: 70px;
	font-size: 1.1em;
	color: #646464;
}
#respond input, #respond textarea {
	padding: 5px;
	width: 400px;
	margin: 0px 0px 10px 0px;
	border: 1px solid #B1DDFF;
}
#respond textarea {
	height: 150px;
	margin-left: 85px;
}
#respond textarea:focus, #respond input:focus {
	border: 1px solid #00ccff;
}
#respond input#submit {
	float: right;
	padding: 5px;
	width:200px;
	margin-right: 250px;
	margin-top: 10px;
	font-size: 1em;
	color: #ffffff;
	background-color:#09F;
}
/*	Footer	*/
#footer .footwrap{
	width:1000px;
	margin:0 auto;
}
#footer .column h3{
	font: 120% Georgia, "Times New Roman", Times, serif;
	color: #f4f4f4;
	border-bottom: thin #f4f4f4 solid;
	padding-top: 10px;
	text-indent: 5px;
}
#footer p {
	padding: 15px 0;
	font-size: 1.1em;
}
#footer .column{ 
	width: 310px; 
	float: left; 
	padding: 10px 15px 0px 0px; 
	position: relative; 
	height: 200px;   
}
#footer .column h4{ 
	color: #f4f4f4; 
	font-size: 1.4em; 
	text-shadow: #222 1px 0px 1px; 
}
#footer .column ul{ 
	padding: 0px; 
	margin: 10px 0px; 
	list-style-type: none; 
	color: #f4f4f4; 
	font-size: 1.1em; 
	line-height: 1em; 
}
#footer .column ul li{ 
	margin-bottom: 5px; 
}
#footer .column #blog ul li{
	padding: 10px 0 0 5px;
	font-size: 1em;
	color: #f4f4f4;
	font-weight:lighter;
}
#footer .column #faq { 
	width: 300px; 
	height: 130px; 
	position: relative; 
	overflow: hidden; 
	margin: 5px 0 0 5px; 
	text-align: center; 
}
#footer .column #faq li { 
	width: 300px; 
	height: 130px; 
	position: relative;  
	overflow: hidden; 
	font: italic 1em/1.6em Georgia, "Times New Roman", Times, serif;
}
#footer .column #faq p { 
	position: absolute; 
	top: 10px; 
	padding: 0; 
	margin: 0px; 
	font-size: 0.9em; 
	color: #f4f4f4; 
}
#footer #sitemap{ 
	clear: both; 
	padding-top: 10px; 
	color: #c2c2c2; 
	text-align: center;  
	font-size: 1.1em; 
} 
#footer #sitemap ul{ 
	padding: 10px; 
	margin: 0px 0px 15px; 
	list-style-type: none;  
}
#footer #sitemap li{ 
	display: inline; 
	margin: 0px 10px; 
	text-transform: uppercase; 
}
#footer #sitemap li a{ 
	color: #c2c2c2; 
}
#footer #sitemap a:hover{ 
	color: #00b2da; 
}
#footer .copyright{
	clear: both;
	color: #a6a6a6;
	margin: 0 auto;
	font-size: 80%;
}
#footer .footlogo{
	float: left;
	margin-left: 20px;
}
#footer .footnav{
	float: right;
	margin-right: 20px;
	padding-top:15px;
}
#footer .footnav ul {
	list-style: none;
}
#footer .footnav li {
	float: left;
	margin-left: 20px;
}
#footer .footnav li a {
	display: block;
	font: italic 12px Verdana, Geneva, sans-serif;
	text-decoration: none;
	color: #f4f4f4;
}
#footer .footnav li a:hover {
	text-decoration: none;
	color: #119fcd;
	cursor: pointer; /* For IE6 */
}
#footer .footnav li.current_page a{color: #119fcd;}
#footer a, #footer a:hover, #footer a:visited, #footer a:active {
	text-decoration: none;
	color: #d9d9d9;
}
/*	General Classes	*/
ul.mybullets li{
	background:url(../images/mybullet.gif) no-repeat 0 8px;
	padding: 5px;
	text-indent: 15px;
	font: italic 12px Verdana, Geneva, sans-serif;
	color: #333333;
	margin-left: 20px;
}
.formp{
	font:italic 12px Verdana, Geneva, sans-serif;
}
.mains{
	background:url(../images/mainsays9.png) no-repeat;
	text-indent:-9999px;
	width: 950px;
	height: 206px;
}
.maina{
	background:url(../images/fmainadd.png) no-repeat;
	text-indent:-9999px;
	width: 960px;
	height: 304px;
}
.maina.abouta{background:url(../images/about3.png) no-repeat;}
.mains.abouts{background:url(../images/aboutsaying6.png) no-repeat;height:137px;}
.maina.weba{background:url(../images/fwebadd.png) no-repeat;}
.mains.webs{background:url(../images/websays4.png) no-repeat;height:184px;}
.maina.contacta{background:url(../images/contactadd2.png) no-repeat -5px 0;height:315px;}
.mains.contacts{background:url(../images/contactsays2.png) no-repeat;height:185px;}
.rss{background: url(../images/rssicon.png) no-repeat 200px -2px;}
.twitter{
	text-indent: 40px;
	background: url(../images/twitter2.png) no-repeat 0 5px;
}
.facebook{
	text-indent: 40px;
	background: url(../images/facebook2.png) no-repeat 0 5px;
}
.linkedin{
	text-indent: 40px;
	background: url(../images/linkedin2.png) no-repeat 0 5px;
}
.web{
	background:url(../images/pcicon2.png) no-repeat left 20px;
	text-indent: 40px;
}
.time{
	background:url(../images/clockicon.png) no-repeat left 20px;
	text-indent: 40px;
}
.tools{
	background:url(../images/toolsicon2.png) no-repeat left 20px;
	text-indent: 40px;
}
/* Layout Continued Sticky footer	*/
#main {
	overflow:auto;
	padding-bottom: 320px;
}  /* must be same height as the footer */
#footer {
	position: relative;
	margin-top: -320px; /* negative value of footer height */
	height: 320px;
	clear:both;
	background:#1a1a1a url("../images/footerbg.png") repeat-x;
} 
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

Here is my reset css code:

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


Here is the easyslider 1.7 javascript code I am using:

/*
 * 	Easy Slider 1.7 - jQuery plugin
 *	written by Alen Grakalic	
 *	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
/*
 *	markup example for $("#slider").easySlider();
 *	
 * 	<div id="slider">
 *		<ul>
 *			<li><img src="images/01.jpg" alt="" /></li>
 *			<li><img src="images/02.jpg" alt="" /></li>
 *			<li><img src="images/03.jpg" alt="" /></li>
 *			<li><img src="images/04.jpg" alt="" /></li>
 *			<li><img src="images/05.jpg" alt="" /></li>
 *		</ul>
 *	</div>
 *
 */

(function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefore:	'',
			controlsAfter:	'',	
			controlsFade:	true,
			firstId: 		'firstBtn',
			firstText: 		'First',
			firstShow:		false,
			lastId: 		'lastBtn',	
			lastText: 		'Last',
			lastShow:		false,				
			vertical:		false,
			speed: 			800,
			auto:			false,
			pause:			8000,
			continuous:		true, 
			numeric: 		false,
			numericId: 		'control'
		}; 
		
		var options = $.extend(defaults, options);  
				
		this.each(function() {  
			var obj = $(this); 				
			var s = $("li", obj).length;
			var w = $("li", obj).width(); 
			var h = $("li", obj).height(); 
			var clickable = true;
			obj.width(w); 
			obj.height(h); 
			obj.css("overflow","hidden");
			var ts = s-1;
			var t = 0;
			$("ul", obj).css('width',s*w);			
			
			if(options.continuous){
				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
				$("ul", obj).css('width',(s+1)*w);
			};				
			
			if(!options.vertical) $("li", obj).css('float','left');
								
			if(options.controlsShow){
				var html = options.controlsBefore;				
				if(options.numeric){
					html += '<ol id="'+ options.numericId +'"></ol>';
				} else {
					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\\"javascript:void(0);\\">'+ options.firstText +'</a></span>';
					html += ' <span id="'+ options.prevId +'"><a href=\\"javascript:void(0);\\">'+ options.prevText +'</a></span>';
					html += ' <span id="'+ options.nextId +'"><a href=\\"javascript:void(0);\\">'+ options.nextText +'</a></span>';
					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\\"javascript:void(0);\\">'+ options.lastText +'</a></span>';				
				};
				
				html += options.controlsAfter;						
				$(obj).after(html);										
			};
			
			if(options.numeric){									
				for(var i=0;i<s;i++){						
					$(document.createElement("li"))
						.attr('id',options.numericId + (i+1))
						.html('<a rel='+ i +' href=\\"javascript:void(0);\\"></a>')
						.appendTo($("#"+ options.numericId))
						.click(function(){							
							animate($("a",$(this)).attr('rel'),true);
						}); 												
				};							
			} else {
				$("a","#"+options.nextId).click(function(){		
					animate("next",true);
				});
				$("a","#"+options.prevId).click(function(){		
					animate("prev",true);				
				});	
				$("a","#"+options.firstId).click(function(){		
					animate("first",true);
				});				
				$("a","#"+options.lastId).click(function(){		
					animate("last",true);				
				});				
			};
			
			function setCurrent(i){
				i = parseInt(i)+1;
				$("li", "#" + options.numericId).removeClass("current");
				$("li#" + options.numericId + i).addClass("current");
			};
			
			function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent(t);
			};
			
			function animate(dir,clicked){
				if (clickable){
					clickable = false;
					var ot = t;				
					switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break; 
						default:
							t = dir;
							break; 
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};
					
					if(!options.continuous && options.controlsFade){					
						if(t==ts){
							$("a","#"+options.nextId).hide();
							$("a","#"+options.lastId).hide();
						} else {
							$("a","#"+options.nextId).show();
							$("a","#"+options.lastId).show();					
						};
						if(t==0){
							$("a","#"+options.prevId).hide();
							$("a","#"+options.firstId).hide();
						} else {
							$("a","#"+options.prevId).show();
							$("a","#"+options.firstId).show();
						};					
					};				
					
					if(clicked) clearTimeout(timeout);
					if(options.auto && dir=="next" && !clicked){;
						timeout = setTimeout(function(){
							animate("next",false);
						},diff*options.speed+options.pause);
					};
			
				};
				
			};
			// init
			var timeout;
			if(options.auto){;
				timeout = setTimeout(function(){
					animate("next",false);
				},options.pause);
			};		
			
			if(options.numeric) setCurrent(0);
		
			if(!options.continuous && options.controlsFade){					
				$("a","#"+options.prevId).hide();
				$("a","#"+options.firstId).hide();				
			};				
			
		});
	  
	};

})(jQuery);
(function($) {

jQuery.fn.pngFix = function(settings) {

	// Settings
	settings = jQuery.extend({
		blankgif: 'blank.gif'
	}, settings);

	var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
	var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);

	if (jQuery.browser.msie && (ie55 || ie6)) {

		//fix images with png-source
		jQuery(this).find("img[src$=.png]").each(function() {

			jQuery(this).attr('width',jQuery(this).width());
			jQuery(this).attr('height',jQuery(this).height());

			var prevStyle = '';
			var strNewHTML = '';
			var imgId = (jQuery(this).attr('id')) ? 'id="' + jQuery(this).attr('id') + '" ' : '';
			var imgClass = (jQuery(this).attr('class')) ? 'class="' + jQuery(this).attr('class') + '" ' : '';
			var imgTitle = (jQuery(this).attr('title')) ? 'title="' + jQuery(this).attr('title') + '" ' : '';
			var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' + jQuery(this).attr('alt') + '" ' : '';
			var imgAlign = (jQuery(this).attr('align')) ? 'float:' + jQuery(this).attr('align') + ';' : '';
			var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;' : '';
			if (this.style.border) {
				prevStyle += 'border:'+this.style.border+';';
				this.style.border = '';
			}
			if (this.style.padding) {
				prevStyle += 'padding:'+this.style.padding+';';
				this.style.padding = '';
			}
			if (this.style.margin) {
				prevStyle += 'margin:'+this.style.margin+';';
				this.style.margin = '';
			}
			var imgStyle = (this.style.cssText);

			strNewHTML += '<span '+imgId+imgClass+imgTitle+imgAlt;
			strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;'+imgAlign+imgHand;
			strNewHTML += 'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;';
			strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\\'' + jQuery(this).attr('src') + '\\', sizingMethod=\\'scale\\');';
			strNewHTML += imgStyle+'"></span>';
			if (prevStyle != ''){
				strNewHTML = '<span style="position:relative;display:inline-block;'+prevStyle+imgHand+'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;'+'">' + strNewHTML + '</span>';
			}

			jQuery(this).hide();
			jQuery(this).after(strNewHTML);

		});

		// fix css background pngs
		jQuery(this).find("*").each(function(){
			var bgIMG = jQuery(this).css('background-image');
			if(bgIMG.indexOf(".png")!=-1){
				var iebg = bgIMG.split('url("')[1].split('")')[0];
				jQuery(this).css('background-image', 'none');
				jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
			}
		});
		
		//fix input with png-source
		jQuery(this).find("input[src$=.png]").each(function() {
			var bgIMG = jQuery(this).attr('src');
			jQuery(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\\'' + bgIMG + '\\', sizingMethod=\\'scale\\');';
   		jQuery(this).attr('src', settings.blankgif)
		});
	
	}
	
	return jQuery;

};

})(jQuery);
$(document).ready(function(){ 
        $(document).pngFix(); 
    }); 

My jquery library is jQuery 1.2.3. I havent posted it but if you need it I can. Is my problem anything to do with my position:relative in my css on certain things?
Thanks

It might be worth just packaging up your page (scripts and all) and posting it, as it’s hard to debug in pieces like this.

or give a link to the page! I don’t see anything strange in your CSS. So seeing the entire package would be helpfull