I'm having a similar issue as this... CSS bubbling while using jQuery Quicksand. When I hit filter the <li> gets a position absolute and a top: 206 and slides back up to 0 after the transition is complete it looks fine. But the <li> is jerky or jumpy while moving. Is this a CSS issue? I have a float: left on every item like they mention in the attached link to the other "bubbling" question.
Here is my CSS.
ul.filter li {
float:left;
margin-right:20px;
margin-bottom: 20px;
list-style-type: none;
font-size: 17px;
}
ul.filterable-grid{ float: left; }
ul.filterable-grid li {
width:295px;
float: left;
margin-right:10px;
list-style-type: none;
text-transform: uppercase;
padding: 10px 10px 10px 10px;
border: 3px solid;
display: block;
}
Here is my markup when viewing the source.
<ul class="filterable-grid clearfix">
<li class="portfolio-item" data-id="id-2" data-type="filter-two ">
<a rel="prettyPhoto[gallery]" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg">
<img width="500" height="500" src="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg" class="attachment-portfolio wp-post-image" alt="1" />
</a>
<p><a href="http://localhost:8888/BVH/?portfolio=testing2">Testing2</a></p>
</li>
<li class="portfolio-item" data-id="id-3" data-type="filter-one ">
<a rel="prettyPhoto[gallery]" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg">
<img width="500" height="500" src="http://localhost:8888/BVH/wp-content/uploads/2013/03/1.jpg" class="attachment-portfolio wp-post-image" alt="1" />
</a>
<p><a href="http://localhost:8888/BVH/?portfolio=testing">Testing</a></p>
</li>
</ul>
After looking at the example given here, I think you can get rid of this line:
ul.filterable-grid{ float: left; }
Add a height and a overflow:hidden attribute to your li styling