Firefox + Masonry + Drupal Tarski

Hi Hangar_217,
I have narrowed it down for you to this file: http://www.hangar217.com/sites/all/themes/tarski/style.css
And this declaration:

#content-wrapper,
#sidebar-first-wrapper,
#sidebar-second-wrapper {
  float: left;
}

and this selector: #content-wrapper,

You will now need to workout why that is the problem.
This blog post might help you work out how I got this far: Debugging CSS Problems

It looks to me that javascript is trying to control the layout of the gallery by computing the position for each image block. FF, for whatever reason, is not figuring the x-offset correctly. On all cases, the left value is zero instead of the value that would create the appearance of a second, third, or fourth column, e.g. 180px, 360px, 480px. In Firebug, see the inlined style attributes for for each image block, <div style="position: absolute; top: 0px; left: 0px;" class="masonry-item views-row views-row-1 views-row-odd views-row-first masonry-brick">.

It is my (not in the least humble) opinion that javascript, by being on the client, is fragile; not to be trusted. Were it me coding the page, the masonry-item class would be styled as below, and the javascript controlling this layout would be scrapped.

.view-content {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  display: inline-block;
  }

.view--uvres-des-membres.view-display-id-block .masonry-item {
  margin: 10px;
  }

The inline-block makes the column property treat the code block as a word, and not break it over two columns. It also provides graceful fail-through for IE until v.10 is released. Only IE, of the majors, does not support columns in some form.

I was worried that there might be conflicts, but I see this class's styles are embedded in the document. Simply replace this

<style type="text/css" media="all">
<!--/*--><![CDATA[/*><!--*/
.view--uvres-des-membres.view-display-id-block .masonry-item{float:left;margin:10px;width:180px;}
.view--uvres-des-membres.view-display-id-block .view-content{margin:0 auto;}
html{font-size:12px;}#header,#header-menu,#main,#footer{width:100%;min-width:960px;max-width:1020px;}

/*]]>*/-->
</style>

Initially test by simply disabling javascript.

cheers,

gary

Now I'm getting somewhere.

I just did a rapid test swichting off Javascript. It did the job but at the same time, the pager «exploded»: it doesnt line up anymore.

There is something that still eludes me: is the problem in the Masonry Module, in the theme or in both?

Thanks.

What do you mean by

Are you talking about the arrow image/link that returns you to the top of the page? Something else?

Keep in mind that the javascript will be enabled once the guilty function/s/ have been removed and style edits put in place.

cheers,

gary

I suspect, by file name alone, the guilty functions are located in this file:

.../libraries/masonry/jquery.masonry.min.js?md9xga

I haven't looked, nor will I. Deciphering other people's programming code is beyond my pay grade. I have trouble enough going back over my own.

cheers,

gary