Colorbox, Internet Explorer & Colorbox examples can cause issues with Jquery / IE Ubercart. [#841932]

We've come across issues with the examples in colorbox affecting Internet Explorer users checkout through Ubercart. This was directly related to the css in the colorbox library examples at the bottom as so:

.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png

Just a heads up that if you're using these examples, you'll want to specify a relative path like "/sites/all/libraries/colorbox/example1/images/internet_explorer/borderTopLeft.png" to keep from causing issues with other modules, javascript, and IE.

Colorbox Explanation:
=======================
ColorBox's borders do not display in Internet Explorer:

Some of the example styles provided make use of transparent .PNG files. Alpha transparencies aren't supported by default in IE6, and can cause an undesirable 'black halo' effect in IE7 and IE8 when changing their opacity. ColorBox resolves this by using one of IE's CSS filters. You can see these at the bottom of colorbox.css. The filter src paths are relative to the HTML document (just like an IMG element), while CSS background image paths are relative to the CSS document. In the examples I provide the relative path is the same, but users often change the directory structure once they move the files over to their own host. The filter src path needs to reflect this change with the appropriate relative path or an absolute path. Here is an example that assumes the 'images' folder is in the root directory:

Original CSS with incorrect relative path:
.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png

Corrected relative path:
.AlphaImageLoader(src=/images/internet_explorer/borderTopLeft.png

Corrected absolute path:
.AlphaImageLoader(src=http://your_domain.com/images/internet_explorer/borderTopLeft.png

Comments

Comment #1

frjo CreditAttribution: frjo commented 1 July 2010 at 07:02

This is mentioned in the README also.

We maybe could add some detail instructions how to move an example style to the theme and implement it there.

Since the example styles are part of the Colorbox plugin the Colorbox module can't fix it. The only way would be to duplicate all the example style in the Colorbox module itself.

The style that comes with Colorbox module does not have this problem.

Comment #2

frjo CreditAttribution: frjo commented 5 August 2010 at 08:05

Component:	Miscellaneous	» Documentation
Category:	bug	» task

Comment #3

asb CreditAttribution: asb commented 9 November 2010 at 15:26

My watchdog log reports lots of missing image files in the "page not found" category, e.g.:

interpreten/images/internet_explorer/borderBottomRig ...
interpreten/images/internet_explorer/borderBottomCen ...
interpreten/images/internet_explorer/borderBottomLef ...
interpreten/images/internet_explorer/borderMiddleRig ...
interpreten/images/internet_explorer/borderMiddleLef ...
interpreten/images/internet_explorer/borderTopRight.png
interpreten/images/internet_explorer/borderTopCenter.png
interpreten/images/internet_explorer/borderTopLeft.png
images/internet_explorer/borderBottomRight.png
images/internet_explorer/borderBottomCenter.png
images/internet_explorer/borderBottomLeft.png
images/internet_explorer/borderMiddleRight.png
images/internet_explorer/borderMiddleLeft.png
images/internet_explorer/borderTopRight.png
images/internet_explorer/borderTopCenter.png
images/internet_explorer/borderTopLeft.png
images/internet_explorer/borderBottomRight.png
images/internet_explorer/borderBottomCenter.png
images/internet_explorer/borderBottomLeft.png
images/internet_explorer/borderMiddleRight.png
images/internet_explorer/borderMiddleLeft.png
images/internet_explorer/borderTopRight.png
images/internet_explorer/borderTopCenter.png
images/internet_explorer/borderTopLeft.png

These missing files errors span over several log pages (dozends of missing files per requestes web page).

I am using the examples which come with the 'Colorbox' module (I believe; ./admin/settings/colorbox, "Styles and options", "Display is set to "Example 1"). Firstly I suspected the theme (#964652), but the only references I can find are from colorbox (did a grep -R internet_explorer * in ./sites/all/libraries.

Somehow this stuff seems to get injected into the site's CSS (following in a grep excerpt from ./sites/default/files/css/, there are many more results):

sites/default/files/css/css_7c7788341ee6cc0e87523c8be58369df.css:#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}#cboxOverlay{position:fixed;width:100%;height:1
00%;}#cboxMiddleLeft,#cboxBottomLeft{clear:left;}#cboxContent{position:relative;overflow:hidden;}#cboxLoadedContent{overflow:auto;}#cboxLoadedContent iframe{display:block;width:100%;height:100%;border:0;}#cbox
Title{margin:0;}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer;}#cboxOverlay{background:url(/sites/all/libra
ries/colorbox/example1/images/overlay.png) 0 0 repeat;}#colorbox{}#cboxTopLeft{width:21px;height:21px;background:url(/sites/all/libraries/colorbox/example1/images/controls.png) -100px 0 no-repeat;}#cboxTopRigh
t{width:21px;height:21px;background:url(/sites/all/libraries/colorbox/example1/images/controls.png) -129px 0 no-repeat;}#cboxBottomLeft{width:21px;height:21px;background:url(/sites/all/libraries/colorbox/examp
le1/images/controls.png) -100px -29px no-repeat;}#cboxBottomRight{width:21px;height:21px;background:url(/sites/all/libraries/colorbox/example1/images/controls.png) -129px -29px no-repeat;}#cboxMiddleLeft{width
:21px;background:url(/sites/all/libraries/colorbox/example1/images/controls.png) left top repeat-y;}#cboxMiddleRight{width:21px;background:url(/sites/all/libraries/colorbox/example1/images/controls.png) right 
top repeat-y;}#cboxTopCenter{height:21px;background:url(/sites/all/libraries/colorbox/example1/images/border.png) 0 0 repeat-x;}#cboxBottomCenter{height:21px;background:url(/sites/all/libraries/colorbox/exampl
e1/images/border.png) 0 -29px repeat-x;}#cboxContent{background:#fff;}#cboxLoadedContent{margin-bottom:28px;}#cboxTitle{position:absolute;bottom:4px;left:0;text-align:center;width:100%;color:#949494;}#cboxCurr
ent{position:absolute;bottom:4px;left:58px;color:#949494;}#cboxSlideshow{position:absolute;bottom:4px;right:30px;color:#0092ef;}#cboxPrevious{position:absolute;bottom:0;left:0px;background:url(/sites/all/libra
ries/colorbox/example1/images/controls.png) -75px 0px no-repeat;width:25px;height:25px;text-indent:-9999px;}#cboxPrevious.hover{background-position:-75px -25px;}#cboxNext{position:absolute;bottom:0;left:27px;b
ackground:url(/sites/all/libraries/colorbox/example1/images/controls.png) -50px 0px no-repeat;width:25px;height:25px;text-indent:-9999px;}#cboxNext.hover{background-position:-50px -25px;}#cboxLoadingOverlay{ba
ckground:url(/sites/all/libraries/colorbox/example1/images/loading_background.png) center center no-repeat;}#cboxLoadingGraphic{background:url(/sites/all/libraries/colorbox/example1/images/loading.gif) center 
center no-repeat;}#cboxClose{position:absolute;bottom:0;right:0;background:url(/sites/all/libraries/colorbox/example1/images/controls.png) -25px 0px no-repeat;width:25px;height:25px;text-indent:-9999px;}#cboxC
lose.hover{background-position:-25px -25px;}.cboxIE #cboxTopLeft{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png,sizingMethod='sc
ale');}.cboxIE #cboxTopCenter{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png,sizingMethod='scale');}.cboxIE #cboxTopRight{back
ground:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png,sizingMethod='scale');}.cboxIE #cboxBottomLeft{background:transparent;filter:progid:
DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png,sizingMethod='scale');}.cboxIE #cboxBottomCenter{background:transparent;filter:progid:DXImageTransform.Microsoft.Al
phaImageLoader(src=images/internet_explorer/borderBottomCenter.png,sizingMethod='scale');}.cboxIE #cboxBottomRight{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/in
ternet_explorer/borderBottomRight.png,sizingMethod='scale');}.cboxIE #cboxMiddleLeft{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLe
ft.png,sizingMethod='scale');}.cboxIE #cboxMiddleRight{background:transparent;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png,sizingMethod='scale');
}

The mentioned FAQ http://colorpowered.com/colorbox/#help_paths suggests:

Corrected relative path:
.AlphaImageLoader(src=/images/internet_explorer/borderTopLeft.png

However, I've go a lot more broken links than this faq example (e.g. to borderTopRight.png etc). Do I have to duplicate and rewrite the complete CSS from ./sites/all/libraries/colorbox/example1/colorbox.css to fix this issue?

Thanks & greetings, -asb

Comment #4

frjo CreditAttribution: frjo commented 9 November 2010 at 17:06

Version:

6.x-1.0-beta5

» 6.x-1.x-dev

asb: This problem is mentioned in the README, "Example styles borders do not display in Internet Explorer".

The "borderTopLeft.png" in the FAQ is just used as an example. You need to fix the path for all the border images.

Simply copy all the IE CSS from the example style you are using to a CSS file in your theme and change the paths so they are correct. CSS in your theme will override that of a module so this will fix your problem. Clear the Drupal cache also before testing if it works.

Comment #5

asb CreditAttribution: asb commented 9 November 2010 at 17:20

Thanks, I'll try this!

Comment #6

asb CreditAttribution: asb commented 16 January 2011 at 13:19

Not to self since I just ran into this again:

* The section to clone and adapt comes from ./sites/all/libraries/colorbox/example4/colorbox.css, it's the part below "The following fixes png-transparency for IE6..." (for "example4")
* The error message about a missing "images/internet_explorer/borderBottomRight.png" etc. is also logged when other browsers (non IE) are used, in my case Opera
* Other indicators which might point to a misconfigured 'Colorbox' module are Imagecache problems (warning message in watchdog: "Cached image file sites/default/files/imagecache/960/....jpg already exists but is being regenerated. There may be an issue with your rewrite configuration."; referrer logged in watchdog: "http://.../user/login?destination=images%2Finternet_explorer%2FborderTopLeft.png")