Doesn't work on IE6.

Some reading material:
http://www.hedgerwow.com/360/dhtml/css-inline-block-layout.php
http://www.hedgerwow.com/360/dhtml/css-display-inline.html
http://robots.thoughtbot.com/post/159806965/how-i-learned-to-stop-floati...
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

@sun: you mentioned you might have time to tackle this?

CommentFileSizeAuthor
#19 575790.image_.gallery-cross-browser-css.patch686 bytesjoachim
#11 gallery-ie8.png119.35 KBmokko
#11 gallery-ff.png143.57 KBmokko
#5 575790.image_.hollyhack-gallery-items.patch550 bytesjoachim
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Dan Silver’s picture

Dan Silver CreditAttribution: Dan Silver commented

thanks for making this. subscribing

joachim’s picture

joachim CreditAttribution: joachim commented 
li.views-fluid-grid-item {
  display: inline-block;
}
/* Holly hack to enforce hasLayout for IE7 and lower. \*/
* html li.views-fluid-grid-item {
  display: inline;
  zoom: 1;
}
/* */

The above was suggested in the discussion about getting this style into Views: #377574: Fluid grid style plugin.
Can someone with IE6 or 7 test please?

jaxtheking’s picture

jaxtheking CreditAttribution: jaxtheking commented

Weird enough, in IE7 all it took to make it work was:

li.views-fluid-grid-item {
display: inline;
}

It did not work with inline-block. Go figure...

joachim’s picture

joachim CreditAttribution: joachim commented

Yes; inline-block doesn't work on IE 7 or lower, hence the Holly hack to set the items to inline instead.

joachim’s picture

joachim CreditAttribution: joachim commented
Status: Active » Needs review
FileSize
575790.image_.hollyhack-gallery-items.patch550 bytes

Here's a patch to try.

eL’s picture

eL CreditAttribution: eL commented

Tried the patch. Doesnt work for me :(

http://www.zastavimcas.cz/galerie/ratolesti

joachim’s picture

joachim CreditAttribution: joachim commented
Status: Needs review » Needs work

I don't have access to any version of IE to test, so any work on this will have to come from users.

eL’s picture

eL CreditAttribution: eL commented

Maybe usefull for some testers: http://www.my-debugbar.com/wiki/IETester/HomePage

All versions of IE in one window.

eL’s picture

eL CreditAttribution: eL commented

Here is my solution and it works. For IE6 is height needed, so it must be hard coded and sometimes (when pictures are vertical oriented) it is not nice, but better than before.

replace in image.css

.view .image-gallery-nodes ul li {
  display:inline-block;
  *display:inline;
  /*
    There is no pretty way to get thumbnail sizes here.
    This will need to be overridden for sites that set a different size.
  */
  width: auto;
  height: auto;
  _height: 280px;
  text-align:center;
  background: none;
  zoom: 1; 
}
joachim’s picture

joachim CreditAttribution: joachim commented
Status: Needs work » Needs review

Setting to Needs review.

Could other people who use this excuse for a web browser (:p) test please?

mokko’s picture

mokko CreditAttribution: mokko commented
FileSize
gallery-ff.png143.57 KB
gallery-ie8.png119.35 KB

I am using 6.x-1.0-beta5.

I attach screenshots from IE8 and FF same page.

#9 does not work for me. It messes up FF and doesn't help much with IE8

joachim’s picture

joachim CreditAttribution: joachim commented
Status: Needs review » Needs work
mokko’s picture

mokko CreditAttribution: mokko commented

Actually, now I am not sure anymore I entered the asterisk correctly when making the screenshots. It still doesn't work for my IE8. What about this though? That seems to work

.view .image-gallery-nodes ul li {
display:inline-block;
*display:inline;

/*
There is no pretty way to get thumbnail sizes here.
This will need to be overridden for sites that set a different size.
*/
zoom: 1;
list-style-type: none;
height: 150px;
width:150px;
text-align:center;
background: none;
}

mokko’s picture

mokko CreditAttribution: mokko commented
Status: Needs work » Needs review

I have the feeling that #13 doesn't work for IE6 and IE7, but this I cannot test anymore since they upgraded IE at work. Who can?

gfury’s picture

gfury CreditAttribution: gfury commented

I tried #13 and it seems to work for IE7 and IE8. The group of images is now left-justified (instead of centered) for all browsers, but I think I can live with that.

juliangb’s picture

juliangb CreditAttribution: juliangb commented

Subscribe.

CandC540’s picture

CandC540 CreditAttribution: CandC540 commented

#13 seems to work for me in IE6. The best place that I've found to test cross-browser compatibility on a PC is http://spoon.net/browsers

juliangb’s picture

juliangb CreditAttribution: juliangb commented

From my tests, #13 makes it work with IE6, IE7 and IE8.

joachim’s picture

joachim CreditAttribution: joachim commented
FileSize
575790.image_.gallery-cross-browser-css.patch686 bytes

I don't understand exactly what changes are required by #13.

Here is a patch based on what I *think* is meant.

Could people test this please?

juliangb’s picture

juliangb CreditAttribution: juliangb commented

Yes, that's what fixed it for me.

joachim’s picture

joachim CreditAttribution: joachim commented
Status: Needs review » Fixed

Thanks!

Committed to CVS.

#575790 by mokko: Fixed CSS for galleries to work on IE*.

Status: Fixed » Closed (fixed)

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

Kisama’s picture

Kisama CreditAttribution: Kisama commented
Status: Closed (fixed) » Needs review

The current version of image.css does not contain the patch information, and thus break under IE 7 and earlier. I have manually edited my image.css to include these changes and it works, however the image.css file needs to be properly patched.

joachim’s picture

joachim CreditAttribution: joachim commented
Status: Needs review » Postponed (maintainer needs more info)

If you check the dates of this issue being closed (and the changelog for that matter) you'd see this was committed AFTER the release of beta 6. Please try the dev version and report back.

Kisama’s picture

Kisama CreditAttribution: Kisama commented
Status: Postponed (maintainer needs more info) » Fixed

I confirm this and apologize for any inconvenience I may have caused.

Status: Fixed » Closed (fixed)

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