Isotope overlap

Isotope list items overlap in IE8

by davidpauljunior

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<ul id="my-list">
    <li class="span4 device warranty-in" data-name="Accessory">
        <div class="inner">
            <div class="device-header">
                 <h3>Item 1</h3>

                <div class="warranty-end"><span class="label-inline">Warranty ends </span>01-Jun-2018</div>
            </div>
            <div class="device-details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit ullamcorper posuere. Etiam lobortis dictum sem non venenatis</div>
        </div>
    </li>
    <li class="span4 device warranty-in" data-name="Accessory">
        <div class="inner">
            <div class="device-header">
                 <h3>Accessory</h3>

                <div class="warranty-end"><span class="label-inline">Warranty ends </span>01-Jun-2018</div>
            </div>
            <div class="device-details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit ullamcorper posuere. Etiam lobortis dictum sem non venenatis</div>
        </div>
    </li>
</ul>

SCSS

#my-list {
    margin-left: -30px;
    padding: 0;
    .span4 {
        width: 250px;
        list-style: none;
        margin-left: 30px;
        float: left;
        .inner {
            padding: 10px;
            border: 1px solid #ccc;
        }
    }
}

JavaScript

$(function () {

    // Toggle the disabled state of the Warranty Dropdown
    //$('#warranty-status input[type="checkbox"]').change(function(){
    /*  var checked = (!$(this).is(':checked'));
        $('.warranty-status').toggleClass('hide', checked);
        $('.warranty-end').toggleClass('hide', checked);
    });

	*/

    var $container = $('#my-list'),
        filters = {};

    $container.isotope({
        itemSelector: '.device',
    });

    // filter buttons
    $('.filter li').click(function () {
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('selected')) {
            return;
        }

        var $optionSet = $this.parents('.option-set');
        // change selected class
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        // store filter value in object
        // i.e. filters.color = 'red'
        var group = $optionSet.attr('data-filter-group');

        filters[group] = $this.attr('data-filter-value');
        // convert object into array
        var isoFilters = [];

        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }

        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector,
            animationEngine: 'best-available'
        }, function noResultsCheck() {
            var numItems = $('.device:not(.isotope-hidden)').length;
            var noItemsAlert = $('#equipment-list-container .alert');
            if (numItems == 0) {
                noItemsAlert.removeClass('hide');
            } else {
                noItemsAlert.addClass('hide');
            }
        });

        return false;
    });

});