Those seeking a solution to the Z-Index bug in IE7 which causes thumbnails in the Spry Gallery Widget to grow underneath subsequent thumbnails should see this thread in the Spry Forums. I happened to be working on the problem for a client site as another Spry User asked for a solution in the forums.
Spry Galleries use this structure:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg" /></a>
</div>
</div>
In short, the solution to the problem is to change the z-index of the thumbnail img’s containing ancestor. I initially tried changing the z-index of div.thumbnail on the suggestion of Adobe Developer Kin Blas, but found – as he’d found before – that when thumbnails shrink back to normal size, they return to the top left corner of the ancestor, ignoring any margins or padding applied to the img.
I eventually found success by setting position:relative on the surrounding anchor (div.thumbnail a) and setting margins and padding to the surrounding div.
Relevant code (from SpryThumbViewer.js) and CSS follow. I’ve also retained a demo.
growThumbnail:
Spry.Utils.addClassName(img, "inFocus");
+ var ancestor = Spry.Utils.getAncestor(img, "a");
+ ancestor.style.zIndex = 150;
img.style.zIndex = 150;
shrinkThumbnail:
var self = this;
+ var ancestor = Spry.Utils.getAncestor(img, "a");
Spry.Utils.addClassName(img, "inFocus");
this.sizeAndPosition(img, 0, 0, this.thumbWidth, this.thumbHeight, function(b){self.behaviorsArray[img.spryID] = null;
Spry.Utils.removeClassName(img, "inFocus"); });
img.style.zIndex = 1;
+ ancestor.style.zIndex = 1;
CSS
#thumbnails div {
margin: 12px 8px;
width: 168px;
height: 112px;
float: left;
}
#thumbnails div a {
display:inline;
float:left;
height:112px;
width:168px;
position:relative;
}
#thumbnails div a img {
border: 1px solid #999999;
height:112px;
width:168px;
position:absolute;
}
I’m confused. The example for Spry gallery DOESN’T use an anchor tag around the thumbnails… In your article and in some posts in the adobe forums, you say that the structure is:
However, I downloaded Spry_1_6_1_022408 and copied the example thumbnails element & content verbatim:
NO ANCHOR TAG. Even if you look in the generated source, there’s no link surrounding the thumbnail image.
So I guess I am unclear as to how to apply your fix? Using the 1.6.1 version, the sample function code you show doesn’t match, nor does it seem to reflect your modifications…
Any ideas? I managed to track down your post about the bug in IE 7 (it exists in IE6, too) [the demo link (http://mad.sweepingdesign.com/index.html) goes to a page that says "It works!"]
The actual article can be found here, though the demo link shows nothing: http://www.sweepingdesign.com/wordpress/2007/11/18/spry-gallery-demo-and-ie7-z-index-bug/
Thanks.
This actually helped me place an absolutely positioned above another absolutely positioned div in IE7. It would have taken me forever to figure out alone.
I wish I’d have seen this post before I started working with Spry.Effect.Grow! Nice job!