CODEWITHSUNDEEP
cssinternet-explorerdrupalgallerycolorbox
Robert Fleming
Robert Fleming

Reputation: 294

Drupal Colorbox module and IE

I have about pulled out my hair on this one! I am trying to get Colorbox to display the borders properly in IE7 (IE6 too, but I'll take IE7, at the least!).

You can see what I am seeing here. Click on a picture in the gallery or on the login link. Either way, colorbox is supposed to be appearing correctly. It works fine in FF, but the borders vanish in IE. Does anyone know what is causing this and better yet, how to fix it?

Thank you!

Upvotes: 1

Views: 1264

Answers (2)

Robert Fleming
Robert Fleming

Reputation: 294

It did work! I have been trying that for a while by making an override in my theme file, but I never tried it in the Colorbox library's folder (I hate editing core, even though this really isn't "core.")

For future readers:

  1. Navigate to your sites/all/libraries/colorbox/[whatever colorbox preset name you use - mine was "example1"]/colorbox.css and copy it.
  2. Paste and save the pasted file as colorbox.css.bak
  3. Now open colorbox.css.
  4. Delete the lines at the bottom that look like this: 
/*
        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');}
  1. Save colorbox.css and DONE!

Upvotes: 1

codykrieger
codykrieger

Reputation: 1780

See all those lines starting with ".cboxIE" at the bottom of the colorbox.css file? I'd bet money on the fact that the "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader...;" property is the issue. I had a very similar issue with IE7 before - it has that property in place to fix issues with transparent PNGs for IE, but it's still broken. If you want it to look good in IE6, you'll have to use another PNG fix, but I haven't had any issues with colorbox after I took out all of the ".cboxIE" classes at the bottom of colorbox.css. Or, at least the filter property - the "background: transparent;" can probably stay.

Hope that helps!

Upvotes: 0

Related Questions