In the following case:

img {
max-width: 100%;
}

in internet explorer 8 the colorbox frame is few pixels large, and the image is not displayed...

I solved the problem setting an additional css property

#cboxLoadedContent img {
max-width: none;
}

Comments

frjo’s picture

Category: task » support

I don't believe this CSS comes from the Colorbox module or the Colorbox plugin. I can at least not fins it anywhere in the code.

In what file did you find it?

hutch’s picture

Using grep

git-sandbox/drupal-dev/contrib-7.x-1.x/colorbox > grep -rni 'cboxLoadedContent' *
js/colorbox.js:17:    Drupal.attachBehaviors('#cboxLoadedContent');
styles/stockholmsyndrome/colorbox_stockholmsyndrome.css:23:#cboxLoadedContent {
styles/stockholmsyndrome/colorbox_stockholmsyndrome.css:122:      #cboxLoadedContent {
styles/default/colorbox_default_style.css:23:#cboxLoadedContent {
styles/default/colorbox_default_style.css:104:      #cboxLoadedContent {
styles/default/colorbox_default_style.js:9:        $('#cboxLoadedContent img', context).bind('mouseover', function () {

But that does not explain why IE8 is not behaving ;-(

frjo’s picture

You mean that you yourself add img { max-width: 100%; } in your theme and that breaks Colorbox with IE 8?

DrFoo’s picture

I had the same problem.

At least for me, the problem .css is from the theme pixture_reloaded, a sub-theme of adaptivetheme. First I tried the above fix, which worked fine. Then I decided to try just commenting out the offending statement. That didn't work because the same .css statement is in the parent theme as well. Okay, so I track down at.base.css and lo and behold look at this nifty comment and fix:

/**
 * Flexible Images
 * - This can cause issues in table cells where no width is set on the column,
 *   only in some versions of webkit and IE 7/8.
 * - Google maps break also, see below for fixes.
 */
img {
  max-width: 100%;
  height: auto;
}
/* Override max-width 100% for Gmaps and Getlocations modules */
.gmap img,
.view-gmap img,
#getlocations_map_canvas img {
  max-width: none;
}

Now where have I seen that fix before... Finally, killing the max-width statement both there and in the subtheme does in fact fix the colorbox issue, as well as some others I had. Definitely not a Colorbox problem, but having this here helped me find the solution.

Thanks!

palamida’s picture

Yes, I use max-width: 100%; for images and needed to disable this for the colorbox display because of the IE problem

ataxia’s picture

I'm seeing this on a new Drupal 7 site with the Sky theme (also depends on AdaptiveTheme) in IE8 - it's fine on other browsers. I was able to fix the problem by adding this to my custom CSS file:

img {
  max-width:none;
  height: auto;
}

I don't have this problem with other Drupal 7 sites using the Fusion theme.

mohhess’s picture

Thanks palamida for that you posted and then "Answering" your own question. I had the same issue with IE8, but then I added the CSS to my IE8 specific style sheet and bam...working like magic! Thanks!

criz’s picture

Component: Code » Documentation
Category: support » feature

thx, I can confirm this img max-width: 100% issue! maybe this information should be part of the readme as some base themes come with that by default...

frjo’s picture

Status: Active » Fixed

Committed text to the README about this in 7-dev.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

ntigh52’s picture

Hi to all,
Please help me,
I have the same issue on ie8.
what I need to do to fix that on ie8?

  • I am using drupal 7
  • I dont have jquery update module jQuery JavaScript Library v1.4.4
  • I have colorbox Current version: 1.3.20
  • In the colorbox I have embed - youtube. (I dont need the next and previous bottons) and I have it?!?

The code that i try to view in colorbox is: ( not img >

<html><div> .....
<iframe width="560" height="315">blabla</iframe><object width="420" height="315"><embed >blabla</embed></object>
or 
<object width="420" height="315"><embed >blabla</embed></object>

.....
P.S.
I test color box outsite drupal and all work fine colorbox Current version: 1.3.20 | jQuery JavaScript Library v1.4.4
Its sonthing inside the module...
Thanks a lot!!!

ntigh52’s picture

Status: Closed (fixed) » Active

I dont know why but this issue still active!
all my colorbox link not viewed!
Do you any idea why?
Thanks

ntigh52’s picture

Category: feature » bug
frjo’s picture

Status: Active » Closed (fixed)

Please don't reopen old issues. Post an new issue with your specific problem.

ntigh52’s picture

sorry.
I thought it was the same issue....

fedExpress’s picture

Thank you for fix. Unfortunately, I had this issue too, so I had to add this extra line to CSS (using Zen theme - it has normalize.css file in which img tag has max-width:100%;).

RobW’s picture