icstl
14 Jul 2010, 08:43 AM
Hi, 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
<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