I'm using the galleria jQuery plugin on a site. When the gallery first loads, all of the images appear briefly & vertically in ie 7 & 8. This doesn't happen when i isolate the gallery, only when i put it on a somewhat heavy page. This leads me to believe that it happens when the page is a little slow to load.
Does anybody know a way to fix this? I feel like an overflow: hidden should fix this, but I've applied it along with a height in every container I could think of.
Anybody have any ideas?
Here is my css:
.galleria{list-style:none;width:350px; overflow:hidden; height: 70px;}
.galleria li{display:block;width:50px;height:50px;overflow:hidden;float:left;margin:4px 10px 20px 0;}
.galleria li a{display:none;}
.galleria li div{position:absolute;display:none;top:0;left:180px;}
.galleria li div img{cursor:pointer;}
.galleria li.active div img,.galleria li.active div{display:block;}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display: inline;padding-top:.5em; width: 300px; }
* html .galleria li div span{width:350px;} /* MSIE bug */
html:
<ul class="gallery">
<li class="active"><img src="1.jpg" cap="A great veiw by so and so. This is a long block of info.<br /><span style=color:#666;>Photo by:
Billy D. Williams</span>" alt="Image01"></li>
<li><img src="2.jpg" cap="A mountain <span style=color:#666;>Photo by:
Billy D. Williams</span>" alt="Image01"></li>
<li><img src="3.jpg" cap="Another witty caption <span style=color:#666;>Photo by:
Billy D. Williams</span>" alt="Image01"></li>
<li><img src="4.jpg" cap="<span style=color:#666;>Photo by:
Billy D. Williams</span>" alt="Image01"></li>
</ul>
