masonry wordpress stacking problem

The other day I intended to create a “pinterest” style wordpress site with a whole bunch of images and a simple “like” button, where I decided to leverage a facebook “like” button for sharing instead of a local wordpress “heart” implementation.

Some “wordpress to pinterest” tutorial I came across was totally borked and after some time of frustration, I decided needed to get into the thick of things myself.

In order to create the necessary grid, I used jquery masonry to order the posts as they fit onto the page, but I quickly ran into a few problems… the script seemed to do its job, but the posts were half stacked on top of each other in Safari and Chrome, everything looked a-ok in Firefox. A little bit of googling suggested timing problems and/or to use document ready over image load, none of which made a difference.

It turned out that I had to set a min-height in the css file for the smallest element on the page and everything was dandy. IE8 had trouble setting the min-height of the images correctly and I had to define the width of the img itself in the CSS as well…

The next challenge will be to integrate an infinite page loader… I’ll keep you posted.

  • rodjsr

    thank you! This helped me out!