I'm relatively new to design and running into issues with my current project.
For the banner, I've implemented Easyslider and the images are scrolling smoothly. However, they appear off-center in Google Chrome and fail to display in Firefox. Surprisingly, everything works fine on IE. Additionally, I'm struggling to configure the smaller images below the banner as navigation controllers. It seems like a screen-seat issue, but after spending days trying to resolve it, I'm feeling quite desperate.
You can view the project at this URL:
Here's a snippet of the HTML code:
<section class="banner">
<ul>
<li><a href="#"><img src="img/banner_central_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/banner_central_03.jpg"" alt="" /></a></li>
<li><a href="#"><img src="img/banner_central_04.jpg" alt="" /></a></li>
</ul>
</section>
<section class="container" (more HTML code) . . .
The JQuery snippet:
<script type="text/javascript">
var $j = jQuery.noConflict();
$(document).ready(function(){
$j(".banner").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});
});
</script>
And, finally, some CSS code:
.banner{
width:100%;
height:25em !important;
} (more CSS rules) . . .
Apologies for the somewhat messy code and appreciate any help or suggestions!
Cris