Kimler Adventure Pages (http://randsco.com)

An(other) IE6 Shortcoming

I developed the second, more advanced version of the pure-CSS Photo Zoom (PZ²) in mid June. Besides our long summer vacation, one of the reasons I haven't yet published a 'production version', has revolved around a couple of problems with MSIE. I've found a work-a-round for one, but the other issue - a Z-index change on hover - remains.

I believe that the problem is "unsolvable". The work-a-round is not ideal, as it adds unnecessary complexity and limits PZ²s application. I am not happy.

I blame it all on Microsoft's poor support for CSS standards.

At issue: IE's inability to support a z-index value change for a hovered element.

For an explanation and demonstration, as well as an IE "fix", read on...

- -

A Explanation and Demonstration

The main advantage of PZ², over the original, is that in PZ² the zoomed image overlays the text, instead of shifting the text to make room for the zoomed image. This is demonstrated below. (Note: There are some caption styling differences between the two, which can be changed, in the CSS file, to be alike.)

Original Photo Zoom: Text & images "migrate" for the zoomed photo.
(Sunrise at Mono Lake, California)

The image on the left zooms using the original and the image on the right is zoomed using PZ². With the original, the larger the size difference between the thumbnail and zoomed image, the more the text has to shift, which can be jarring & disorienting. (Of course, as my wife has pointed out, using the original zoom, one can still READ the text, while looking at the picture ... which can't be done using PZ² ... perhaps, the older version is preferable in some applications?).

Using PZ² with a single photo, there generally isn't a z-index problem. It's not until multiple photos are used, which overlap each other upon zoom, that the z-index problem using PZ² becomes obvious.

Look at the multiple photos below. No z-index consideration has been made. When you zoom the left-most photo, you see that it doesn't overlay the ones next to it. This is because each element placed on an XHTML page has an inherent z-index that is higher than what precedes it - meaning that each successive element is "placed on top" of the element before it. Make sense?

Normally, elements don't zoom on hover, so this inherent z-index assignment isn't a problem. However, it looks pretty crappy with PZ² and needs to be dealt with.

Easy. Assign a low z-index value to all un zoomed PZ² photos on a page. Then, assign a high z-index value to the PZ² photo that a mouse is hovering over (only one photo can be zoomed at any given time).

Of course, FireFox (a more modern browser), which follows the CSS standard more closely than MSIE, doesn't have a problem with this declaration. MSIE, however, can't make heads or tails of the declaration and so - ignores it. Look at the photos below. If you're viewing in Firefox - no problem - things look good. If you're viewing in MSIE - problem - things look just like they did above ... YUCK!

The IE "FIX"

After banging my head against the wall and trying a bunch of different things, some of which involved some very loud cursing, I came to the conclusion that I'd have to play games with IE and that PZ² would suffer slightly, as a result.

The fix involved numbering each successive PZ² photo on a page and REVERSING the inherent z-index values, by assigning a lower z-index value to each successive PZ² photo.

The results can be seen below. Now the zoomed images look fine in BOTH Firefox and IE.

The solution works, as long as a zoomed photo doesn't overlay any previous photos. It also 'breaks' if a zoomed photo, at the end of one entry, overlays the first zoomed photo of the NEXT entry. (So, you see, there are limitations with this 'fix' ... which is why I still direct my ire at Microsoft, for not supporting the CSS standards). Grrrr.

The Future

With the beta 1 release of IE7 (July 27, 2005) there is much hope that this version will make up for many of the CSS shortcomings of IE6. As you can read on the IEBlog, there are a bunch of standards support issues that will be addressed in IE7, but unfortunately, many will also remain.

I'm afraid that changing the Z-Index on a hovered element, will be around for some time to come.

Again .... grrrr.

Regarding a production release of PZ² - I'm still working with the code, stabilizing, pruning and adding small features. I've been using it on this blog for the past few entries and the code has been improved markedly. It's now just down to the final testing and should be out shortly. Stay tuned!

10-May-2006 Update

I noticed that Stu Nicholl's Photo Gallery Mk.3 doesn't have a z-index overlay problem. Upon closer examination, I understand why. It's not something that I had ever considered and it shows the power of collaboration on such issues.

Normally, when positioning elements absolutely, I place them INSIDE a relatively positioned element. Doing so resets the origin point to the relatively positioned parent and then one can position the absolute element, within the parent, by using the [ top | left | right | bottom ] properties. However, if one positions an element absolutely, and doesn't use any of the aforementioned positioning properties, it remains fixed at it's original location on the screen (though taken out of the document flow). By using margining to position the element, it's done from THAT location (not the parent or page origin) AND ... the key part ... there is no IE z-index problem in assigning the hovered element a large z-index value.

Have a look at the example below, to see what I mean.

Margining Position Work-a-Round
Firefox (OK); IE - (OK)

Z-index Issue Gone: Using margins to position, rather than [top/bottom/left/right], the IE bug is avoided.(Sydney, Australia #1)

In Fact: This work-a-round allows the zoomed image to overlie ALL other images. (Sydney, Australia #2)

Note: The z-index problem returns if the absolute image is inside of a relatively positioned element. (Sydney, Australia #3)

 

Positioning CSS for the <div>:
.PZ3zoom a {}
.PZ3zoom a:hover { position:absolute; z-index:999; }

Note: the middle image in this example is margined to open closer to the center of the image, which means that it will covers BOTH the left and right thumbs. This configuration is NOT possible, using the earlier "fix" (as it only reverses the natural z-index order) rather than assigning a "highest" z-index value to the hovered image.

**Also: the image elements cannot be placed inside a relatively positioned parent, otherwise the IE z-index issue returns.

Hope this helps! It did me, as this technique is now employed in the (best yet) 3rd version of Photo-caption Zoom.