My website features an edited version of Quicksand that displays correctly on Chrome, Opera, and Firefox, but runs into CSS issues on IE. Oddly enough, when I was using the static version, the CSS displayed properly even on IE until I added the Quicksand effect. Although all the animations work properly, it messes up the display on IE. You can check out the issue at this link: . Here is the Quicksand code snippet:
$(document).ready(function(){
var items = $('.photo_show figure'),
itemsByTags = {};
// Looping through all li items:
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
value = $.trim(value);
if(!(value in itemsByTags)){
itemsByTags[value] = [];
}
itemsByTags[value].push(elem);
});
});
createList('View All',items);
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#gallery_menu nav a').live('click',function(e){
var link = $(this);
link.addClass('current').siblings().removeClass('current');
$('.photo_show').quicksand(link.data('list').find('figure'), function(){
adjustHeight = 'dynamic';
initLytebox();
});
e.preventDefault();
});
$('#gallery_menu nav a:first').click();
function createList(text,items){
var figure = $('<figure>',{'class':'hidden'});
$.each(items,function(){
$(this).clone().appendTo(figure);
});
figure.appendTo('.photo_show');
var a = $('<a>',{
html: text,
href:'#',
data: {list:figure}
}).appendTo('#gallery_menu nav');
}
});
Please visit the provided URL on IE 7 to see the issue for yourself. Additionally, I have included a screenshot showing how it appears on IE: . Any assistance would be greatly appreciated as I am new to jQuery and its plugins, and sometimes the syntax can confuse me.