Colorbox's example1 border isn't showing properly in IE7. I am using Colorbox v1.3.9. Frankly, I have been racking my head on this one and I can't seem to find the fix no matter what I do. I love everything else about it!
Example styles borders do not display in Internet Explorer:
----------------------------------------------------------
If you use one of the example styles and have problems with the border
images not loading in Internet Explorer please read http://colorpowered.com/colorbox/#help_paths.
The default style in Colorbox module does not have this problem.
I think the best solution is to copy the example style over to your theme and fix the paths there.
I ended up cutting the following from example1's css file after backing it up, creating a new css file, pasting that code into it, and creating a conditional stylesheet rule to include it only when the browser was prior to IE7...
/*
The following fixes png-transparency for IE6.
It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
Colorbox preloads navigation hover classes to account for this.
!! Important Note: AlphaImageLoader src paths are relative to the HTML document,
while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background: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.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}
Comments
Comment #1
frjo commentedThis is documented in the README file.
I think the best solution is to copy the example style over to your theme and fix the paths there.
Comment #2
phprf commentedI ended up cutting the following from example1's css file after backing it up, creating a new css file, pasting that code into it, and creating a conditional stylesheet rule to include it only when the browser was prior to IE7...
You can read about my solution here: http://stackoverflow.com/questions/3473567
Comment #3
frjo commentedTry out version 1.3.16 or later of the Colorbox plugin. The Internet Explorer hacks has been improved according to the version history.