Why is there so much space between my list items?

StackOverflow https://stackoverflow.com/questions/22459456

  •  16-06-2023
  •  | 
  •  

Question

I have a horizontal list that auto-wraps repsonsively. I am using a bit of jQuery to keep the li heights equal and it works - sort of. The problem is that it is adding in WAY too much space between rows of list items.

Example: http://ojospa.webez.net/about-ojo/photo-tour.html

Here is my CSS for the list:

ul.galleries { margin-left:0 ;
padding:12px 0 0 0 ;
list-style-type:none ;
overflow:hidden ;
}

.galleries li { display:inline-block ;
float:left ;
width:130px ;
padding:10px ;
font-size:13px ;
text-align:center ;
}

.galleries li img { padding:4px ;
width:120px ;
height:120px ;
border:1px solid #7a2120 ;
margin-bottom:2px ;
}

and my jQuery:

$.fn.extend({
    equalHeights: function(){
        var top=0;
        var row=[];
        var classname=('equalHeights'+Math.random()).replace('.','');
        $(this).each(function(){
            var thistop=$(this).offset().top;
            if (thistop>top) {
                $('.'+classname).removeClass(classname); 
                top=thistop;
            }
            $(this).addClass(classname);
            $(this).height('auto');
            var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
            $('.'+classname).height(h);
        }).removeClass(classname); 
    }      
});

$(function(){
  $(window).resize(function(){
    $('.galleries li').equalHeights();
  }).trigger('resize');
});

I can't figure out for the life of me where all that extra space is coming from. Any help would be most appreciated.

Thanks!

Cynthia

Was it helpful?

Solution 3

OK I solved the problem. I was making it way too complicated w/ my jQuery. Here is what I ended up doing instead, and it worked perfectly:

$(document).ready(function(){
    var maxheight = 0;
    $('.galleries li').each(function(){
        if (maxheight < $(this).height()) {
            maxheight = $(this).height();
        }
    });
    $('.galleries li').height(maxheight);
});

Thank you to everyone who tried to help me. I appreciate it!

Cynthia

OTHER TIPS

Your <li> seem to have an inline height setted to 254px, see image below.

enter image description here

comment this line

$('.'+classname).height(h);

see result here:

enter image description here

Your script is causing all the LI elements to have an inline styled height. Looking at the source, I can see...

enter image description here

I think your call to that jQuery plugin is setting like this. When I tried this, its going off. That means there is no effect on the inline style when applying the following style.

.galleries li {
display: inline-block;
float: left;
width: 130px;
padding: 10px;
font-size: 13px;
text-align: center;
**height: auto !important;**
}

I don't think inline styling is a better idea. Try to avoid that plugin in this context. I don't think it is needed here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top