5 replies [Last post]
Hangar_217
Hangar_217's picture
Offline
newbie
Québec
Last seen: 2 years 5 weeks ago
Québec
Timezone: GMT-5
Joined: 2012-11-10
Posts: 2
Points: 3

Hi.

I've been banging my head — with a friend — on this for quite a while...

Where: http://www.hangar217.com/fr/oeuvres-des-membres

What: In Safari and Chrome, the "Masonry look" is perfect (did not try IE). But in Firefox, the images are displayed in a single column.

We just dont know where to look to make it work in Firefox. Help would be so much appreciated.

Thanks.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 3 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

Hi Hangar_217, I have

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

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 14 min 2 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

JS injected absolute positioning

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>
with what I gave you. That should work once the javascript is trashed.

Initially test by simply disabling javascript.

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

Hangar_217
Hangar_217's picture
Offline
newbie
Québec
Last seen: 2 years 5 weeks ago
Québec
Timezone: GMT-5
Joined: 2012-11-10
Posts: 2
Points: 3

Thanks!

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.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 14 min 2 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

?

What do you mean by

Quote:

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.

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

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 14 min 2 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

Continuing

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. Smile I have trouble enough going back over my own.

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.