QuickSand Script not showing correctly in IE 7

Question

I have an edited version of quicksand in my website, it shows correctly on all browsers or at least chrome opera and firefox. However, on IE I get css problems. when i was using the static version the css showed correctly even on IE , did not change any css just added quicksand effect, but it did mess up the display allthough all the animations work great.. please go to this website http://www.jonathansconstruction.com/galleryie.php the quicksand code is as follow:

$(document).ready(function(){

var items = $('.photo_show figure'),
    itemsByTags = {};

// Looping though all the 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){

        // Removing extra whitespace:
        value = $.trim(value);

        if(!(value in itemsByTags)){
            // Create an empty array to hold this item:
            itemsByTags[value] = [];
        }

        // Each item is added to one array per tag:
        itemsByTags[value].push(elem);
    });

});

// Creating the "Everything" option in the menu:
createList('View All',items);

// Looping though the arrays in itemsByTags:
$.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');

    // Using the Quicksand plugin to animate the li items.
    // It uses data('list') defined by our createList function:

    $('.photo_show').quicksand(link.data('list').find('figure'), function(){

adjustHeight = 'dynamic';
initLytebox();

       });
    e.preventDefault();
});

$('#gallery_menu nav a:first').click();

function createList(text,items){

    // This is a helper function that takes the
    // text of a menu button and array of li items

    // Creating an empty unordered list:
    var figure = $('<figure>',{'class':'hidden'});

    $.each(items,function(){
        // Creating a copy of each li item
        // and adding it to the list:

        $(this).clone().appendTo(figure);
    });

    figure.appendTo('.photo_show');

    // Creating a menu item. The unordered list is added
    // as a data parameter (available via .data('list'):

    var a = $('<a>',{
        html: text,
        href:'#',
        data: {list:figure}
    }).appendTo('#gallery_menu nav');
}
 });

Please go to the URL above and check on IE 7, and other , also I put a screenshow of how it looks like in IE please visit here: http://i49.tinypic.com/25tj2bl.jpg this is how it appears on IE7 and screenshot on other browsers is on the comments of this question : Any Help is appreciated.. I'm new to jquery and its plugins and sometimes the syntax gets me confused...

Answer 1

The line-height you are using for the Body Section is too small which is clipping the stylized font text seen for the title section Gallery Pictures.

In your custom styleie.css file change the value of the height as follows:

line-height:2.12em

For some odd reason, IE requires this to be larger compared to the same value used in your standard CSS file. Check into if the parent elements is affecting these child elements if required.

EDIT: The above line-height doesn't need to be changed after all. In that same line was a typo:

display:inline:block;

Change it to:

display:inline-block;