Here is my question: I have an image wrapped in a div (.indexWrap):
<div id = "slider">
<div class="indexWrap">
<img class="indexImage" src="">
</div>
</div>
Upon page load, 8 of these are created via php within #slider div. To display these images on the home page, I am using smooth Div Scroll. While everything looks fine in Chrome and IE 8/9, there seems to be a problem in Firefox. The auto width of div.indexWrap for each image does not set properly. The div appears to stretch an extra 200-300px to the right. Below is the CSS being used:
#slider{
position: relative;
top:50px;
width:100%;
height:275px;
}
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}
.indexWrap{
float:left;
position:relative;
width:auto;
height:100%;
padding-right:50px;
padding-left:50px;
}
img.indexImage{
float:left;
position:relative;
width:auto;
height:100%;
}
For reference, here is a link to the live version with the issue: jasone.co
Edit:
Additionally, upon page load, each div.indexWrap is not properly padded, but as the scrolling begins, the next retrieved elements are padded correctly. This inconsistency may be causing all the issues mentioned above.