I have a total of 12 divs that are configured to display a thumbnail along with some text dynamically retrieved from a database query. When displayed individually, they appear fine in a column format with a border around them showcasing the thumbnail and text.
However, my goal is to arrange these 'boxes' into a horizontal slider so that visitors can scroll through them if they find something interesting.
The issue I am encountering is that the thumbnails do not seem to display properly. While the div/box displays correctly alongside the text, the images themselves are not showing up.
I have verified that the img tag is correct, leading me to believe that I may need to incorporate a display or z-index property to one of the div containers. Unfortunately, I am currently stuck in a loop trying to troubleshoot this problem.
If you have any suggestions, please share! (I am utilizing easyslider 1.7)
Sample HTML Code:
<div id="samplesales">
<div id="samplecontent">
<div id="slider">
<ul>
<li><div class=sample>
<img src='..path/to/photo'>
Photo description text ...
</div>
</li>
....
<li><div class=sample> another photo etc </div></li>
</ul>
</div></div></div>
CSS Styling:
#samplesales{margin:0 auto;position:relative;text-align:left;width:650px;}
#samplecontent{position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
width:650px;
height:220px;
overflow:hidden;
margin:auto;
display: block;
}
div.sample {
display:block;
border: solid 1px #0066CC;
margin:6px;
padding: 15px 20px 15px 20px;
font-size: 14px;
font-family: courier;
min-height: 170px;
vertical-text-align:middle;
float:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 4px 4px 5px #ccc;
-webkit-box-shadow: 4px 4px 5px #ccc;
-moz-box-shadow: 4px 4px 5px #ccc;
}