Opera 10.5x compability (some CSS tweaks) [#806296]

@TODO: Testing on other browsers, currently tested on Firefox, Chrome, Safari on XP, and IE8

I'm using Colorbox together with Gallery formatter and it's working great in Opera. Only the CSS for the Greenarrow Design needed a bit rework to work probably in Opera. The following changes had to be made:

.galleryformatter-greenarrows .gallery-slides .gallery-slide{height:312px}
.galleryformatter-greenarrows .gallery-slides .panel-overlay{bottom:0}
.galleryformatter .overlay-inner{width:100%}
.galleryformatter h3{color:#fff}

Giving the .gallery-slide a fixed height within the CSS is possible for me, but not for the module. You would have to apply the style-attribute as an element-style (dynamically). If I find other CSS bugs I'll report them here.

Comment	File	Size	Author
#3	galleryformatter-806296.patch	2.4 KB	Manuel Garcia

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Manuel Garcia CreditAttribution: Manuel Garcia commented 22 May 2010 at 12:11

Hi Fleshgrinder, thanks for testing the module!

I have just tested it with the default presets, on Opera/9.80 (X11; Linux i686; U; en) Presto/2.2.15 Version/10.10, and it looks fine.

That said, the module provides the height of the slides as a variable to the tpl file, so you can use it to set the height dynamicaly using element-style if you need to do so for your case.

In the tpl file we are seting it for the gallery-slides container, not to each .gallery-slide:
line 27 of galleryformatter.tpl.php
<div class="gallery-slides" style="width: <?php print $gallery_slide_width; ?>px; height: <?php print $gallery_slide_height; ?>px;">

Please do let us know if you are making other changes for opera, and we'll prepare a proper patch so that everyone can test it, and make sure it doesnt break in other browsers, but well, as far as I can tell, using the presets provided by this module, it works... anyone else seeing a problem in opera?

Comment #2

Fleshgrinder CreditAttribution: Fleshgrinder commented 22 May 2010 at 18:00

I'm using Opera 10.54 build 3394 on Windows 7.

Applying the height dynamically as you mentioned it works perfectly. So the only thing that should be changed afterwards is in the greenarrows.css file:

Line 15:
-   bottom: 0.5em; left: 0;
+   bottom: 0; left: 0;

Line 20:
- .galleryformatter-greenarrows .gallery-slides .panel-overlay .overlay-inner { padding: 10px; }
+ .galleryformatter-greenarrows .gallery-slides .panel-overlay .overlay-inner { width: 100%; padding: 10px; }

Also tested with Mozilla Firefox 3.6.3 (Win), Internet Explorer 8 (Win) and Google Chrome 6.0.401.1 (Win) works flawlessly.

Let me shortly explain why these changes are necessary. The title/description is in front of the gray overlay PNG, in Opera this graphic is invisible. To fix this problem we apply the width:100% to the overlay-inner element. Then the next problem pops-up the overlay and text is not at the bottom of the gallery - as it is in Firefox etc.. To fix this we apply the height to the gallery-slide element and change the bottom value so it displays correctly again on all browsers.

PS: The color:#fff is not necessary - this is only in my personal theme necessary. ;)

PPS: Minified CSS version with changes applied and RGBA instead of an image:

.galleryformatter-greenarrows{}
.galleryformatter-greenarrows .gallery-thumbs{padding:0 46px}
.galleryformatter-greenarrows .gallery-slides{}
.galleryformatter-greenarrows .gallery-slide{}
.galleryformatter-greenarrows .gallery-thumbs .arrow,
.galleryformatter-greenarrows .gallery-thumbs .wrapper,
.galleryformatter-greenarrows .gallery-thumbs li.active a,
.galleryformatter-greenarrows .gallery-thumbs li a:hover,
.galleryformatter-greenarrows .galleryformatter-view-full{background:url("images/sprite.png") no-repeat scroll 0 0 transparent}
/**
 * RGBA is a CSS3 feature and will work in all major browsers, except Internet Explorer.
 * If you want it to work in Internet Explorer apply the following style:
 *
 * background:transparent url("images/bg-trans.png") repeat;
 */
.galleryformatter-greenarrows .gallery-slides .panel-overlay{position:absolute;bottom:0;left:0;background-color:rgba(0,0,0,.6);width:100%;color:#fff}
.galleryformatter-greenarrows .gallery-slides .panel-overlay .overlay-inner{width:100%;padding:10px}
.galleryformatter-greenarrows .gallery-thumbs .wrapper{overflow:auto;line-height:0;background-position:center -326px;background-repeat:repeat-x;border-bottom:1px solid #eee}
.galleryformatter-greenarrows .galleryformatter-view-full{background-position:center -205px;height:46px;width:46px;margin:10px;position:absolute;right:0;top:0;text-indent:-9999px}
.galleryformatter-greenarrows a:hover .galleryformatter-view-full{background-position:center -252px}
.galleryformatter-greenarrows .gallery-thumbs ul{list-style:none}
.galleryformatter-greenarrows .gallery-thumbs li{float:left;background:transparent none;overflow:hidden;padding:3px 4px 0 0}
.galleryformatter-greenarrows .gallery-thumbs li a{display:block;padding:19px 0 7px}
.galleryformatter-greenarrows .gallery-thumbs li a:hover{background-position:center -307px}
.galleryformatter-greenarrows .gallery-thumbs li.active a{background-position:center -303px}
.galleryformatter-greenarrows .gallery-thumbs li.active img,
.galleryformatter-greenarrows .gallery-thumbs li a:hover img{filter:alpha(opacity=100);-ms-filter:"alpha(opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1}
.galleryformatter-greenarrows .gallery-thumbs li img{filter:alpha(opacity=60);-ms-filter:"alpha(opacity=60)";-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6}
.galleryformatter-greenarrows .gallery-thumbs .arrow{bottom:0;cursor:pointer;display:block;height:46px;position:absolute;text-indent:-9999px;width:46px}
.galleryformatter-greenarrows .gallery-thumbs .forward{background-position:0px 0;right:0}
.galleryformatter-greenarrows .gallery-thumbs .back{background-position:-4px -102px;left:0}
.galleryformatter-greenarrows .gallery-thumbs .forward:hover{background-position:0px -52px}
.galleryformatter-greenarrows .gallery-thumbs .back:hover{background-position:-4px -156px}

Comment #3

Manuel Garcia CreditAttribution: Manuel Garcia commented 23 May 2010 at 10:36

Version:	6.x-1.0-rc1	» 6.x-1.x-dev
Status:	Active	» Needs review

File	Size
galleryformatter-806296.patch	2.4 KB

I've prepared a patch so that people can test this properly.

For now I'm keeping the transparent png for the overlay background, I feel we'd be swamped with bug reports if we don't support IE out of the box, as much as we all ^hate it. I only wish one day all browsers will support CSS3. I guess we could use rgba() along with http://kimili.com/journal/rgba-css-generator-for-internet-explorer to get a transparent bg without an image, but we have enough proprietary CSS declarations in the module already.

I'm taking your word for it on Opera on W7, since I cant test on that platform, many thanks Fleshgrinder for the work here!

Comment #4

Fleshgrinder CreditAttribution: Fleshgrinder commented 23 May 2010 at 14:13

You're welcome and thanks to you for that interesting link. I directly tested it and it works like a charm on the browser I have installed:

.galleryformatter-greenarrows .gallery-slides .panel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  /* IE specific styling */
  background: transparent;
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
  /* IE6 and IE7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
  zoom: 1;
  /* CSS3 RGBA background */
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  /* Ensure the text is white no matter what the custom CSS of any theme states */
  color: #ffffff !important;
}

Or minified:

.galleryformatter-greenarrows .gallery-slides .panel-overlay{position:absolute;bottom:0;left:0;background:transparent;-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom:1;background-color:rgba(0,0,0,.6);width:100%;color:#fff!important}

I'll use that code because compatibility for old browsers isn't from interest to me.