Issue with QuickSand Script not displaying properly on Internet Explorer 7

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.

Answer №1

The spacing between lines in the Body Section is too small, causing the stylized font text in the Gallery Pictures title section to be cut off.

To fix this issue, adjust the line-height value in your custom styleie.css file to:

line-height:2.12em

Interestingly, Internet Explorer requires a larger line-height compared to standard CSS files. Make sure to also consider any parent elements that may be affecting these child elements.

UPDATE: It turns out that the line-height doesn't need adjustment. There was actually a typo on the same line:

display:inline:block;

Change it to:

display:inline-block;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the $.get function in AJAX with Rails 4? It seems

After working with Rails for a few years, I decided to dip my toes into the world of AJAX. With a Rails 4 app in hand, I'm currently testing out some functions. My end goal is to reload a partial on the edit page located at app/views/stories/edit.html ...

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

I'm working on creating a CSS flex image gallery that adjusts the width of the images based on the container size: HTML: <div class="grid-container"> <div class="grid-item"> <img src="small-thumb-dpi.jpg" /> < ...

Associate a click event to a dropdown menu element to trigger on selection

My issue involves having multiple select elements. When one of them is changed, I am trying to bind a click event only to its next element with the .btn class. Below is the code snippet illustrating my problem: <div class="whole"> <ul> ...

Upgrading from synchronous $.ajax() to AngularJS $http or vanilla JavaScript (XHR) for asynchronous calls

Presented below is a function that I am currently working with: function getDataAvailablity() { var isDataAvailable; $.ajax({ url: 'http://someurl/data.json', async: false, dataType: json }).success(function() ...

How can I implement a sliding page effect using jQuery with a single navigation bar?

I came across a helpful tutorial at this link: I really admire the sliding effects on this website: Is there a way to achieve similar sliding effects like dk new media's, but with just a single navigation bar? ...

Steps to update XmlHttpRequest URL during image upload

I am currently facing an issue with updating images on my website. When I try to update an image, it redirects to the wrong URL instead of the intended one. The form is set to post data to this URL: POST http://127.0.0.1/mgt/upload/processImage/foodImage ...

Troubleshoot jQuery in an ASP.NET application

Is there a way to intercept the jQuery function call in my Web app that displays a <div>? I want to identify exactly what triggers the appearance of that <div>. I am looking to display the same div using a different button, but the original bu ...

What is the best way to manage these interconnected Flexboxes when using align-items: stretch?

Trying to put this into words is quite challenging, so I created a simple diagram for better understanding: https://i.stack.imgur.com/TMXDr.png The outer parent uses flex with align-items:stretch to ensure that both col 1 and col 2 have the same height. ...

The progress bar feature in Pace.js for Ajax requests is malfunctioning

The instructions state that no code is generally required to use this feature. I have successfully integrated it into my website and it works well upon page load. However, when making an ajax request, it does not seem to work. Is there anything specific ...

Creating equal height nested columns in Bootstrap 3 Grid: ensuring all nested columns are uniform in height

Struggling to make sure all columns in Bootstrap 3 are the same height throughout the page? If you've managed to achieve this with 3 columns, like the example provided here, great job! However, the challenge arises when dealing with nested columns t ...

JQuery implementation of Axis webservice call

Trying to invoke my Axis webservice with the code below var wsUrl = "http://localhost:8080/TestServ/services/TestCls?wsdl"; var soapreq = "<soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:cod=\"http:// ...

When the user clicks, a modal window will appear with a loading animation using

I'm struggling with this code and it's not functioning as expected. Any assistance would be greatly appreciated. $("#Picture1, #Picture2, #Picture3, #Picture4").click(function() { $('#loading').hide().ajaxStart(function() { $(this).s ...

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods. Here's a visual representation of what I'm aiming for: I want the text to al ...

iOS devices are not displaying the background image as intended

I've searched through previous answers on the SO platform, but I'm still unable to find a solution that works for me. I have a static Gatsby site with an infinite scrolling background implemented on desktop, and a static image displayed on mobile ...

How can I ensure that my jQuery code only executes after the mobile CSS has been loaded

When it comes to loading my mobile-only CSS, I typically use a media query similar to: <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" /> However, in addition to these CSS mod ...

Transmit the JSON Data file through an AJAX request

I am encountering an issue where the HttpPostedFileBase is null when trying to send an image file to a Controller. I have attempted entering image: image outside of JSON.stringify({}), but it did not work. Additionally, I tried changing the contentType f ...

Add a CSS class to the text that is selected within a Content Editable div

Hey there, I'm having an issue where the class is being applied to the button when pressed instead of the selected text. Here's my current code: The button needs to be a div, but it might be causing the problem. I just want the highlighted text ...

The HTML navbar seems to have a mind of its own, disappearing and shifting around unpredictably as I zoom in or resize

WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if wind ...

Error received on Node.js controller when calling Jquery getJSON from Ajax form

I have a Node.js / Sails.js application with a client-side form that submits to a Controller using jQuery ajax: $(function () { $("form").submit(function (e) { e.preventDefault(); var form = $(this); $.ajax({ url: ...

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...