CSS Photo-Caption Zoom

"Photo Zoom 3" (PZ3)

March 10th, 2007 (fix)


Pure CSS Photo-Caption Zoom (Version 3)

Demo: Quirks Mode Work-a-Round (IE6 + IE7)

A reader liked Photo-caption zoom, but noted problems with Internet Explorer, in quirks-mode.

I fixed it for IE6, but then IE7 was released and it had a different problem. Ack! Well, I've found a work-a-round that makes a acceptable approximation of PZ3, for pages authored in quirks-mode (like this one). That's the good news. The bad news is that because of conflicts with CSS directives, a pure-CSS solution cannot be utilized in quirks-mode. While it would be easy to blame Microsoft, the solution utilizes something for which they should be credited: conditional comments. (Conditional comments provide a way for authors to write version-specific code aimed at IE, inside of (X)HTML pages).

First,a bit about quirks-mode. I do not recommend authoring pages with a DTD that puts browsers into quirks-mode. There is very little reason to do so (save for rendering deprecated, browser-specific or sloppily-coded HTML). Quirks-mode conflicts with CSS standards and is a moving target, since each major browser has their own definition of what quirks to include. For more information about quirks, I suggest you read this article. If you are determined to use PZ3 in quirks-mode, then read on.


The two images above, utilize a quirks-mode work-a-round that renders an acceptable PZ3 image, for both IE6 and IE7 (as well as FireFox2, Opera9 & Netscape8).

You can use the "Check Mode" button here (a bit of JavaScript) to verify that this page is rendered in quirks-mode (and not standard-mode).

While the work-a-round achieves similar end results, there are very slight differences in the final product, depending upon which version of Internet Explorer you are using.

IE6 - You may notice that the border on the zoomed image is missing (it is only on the thumbnail). Removing the border was necessary to avoid a 1px, top/right-border "gap", which causes the image to JUMP, when a visitor moves their mouse, over those borders. Although it only affects right-floated images, I've removed the zoomed border for both, for consistency. (Using IE6, you can see the quirks problem here).

IE7 - You will surely notice that the change in the origin point for the RTL-aligned image opening, on right-floated imaged. It causes the the zoomed image for right-floated images to JUMP to the left, when you mouse over them. This was overcome by shifting the zoomed image to the right, using a negative, right-margin of 101%. The result for IE7 is that the right edge of the zoomed image "expands" slightly (by 1%) when the image is zoomed zoomed. (It's not a huge issue, but it is not the pixel-perfect solution, like standards-mode). IE7 quirks doesn't have the border problem that IE6 does, so in IE7 the zoomed image retains its border.

Tested in IE6, IE7, Opera9, FireFox2 & Netscape8.


PZ3 Quirks Work-a-Round CSS

CSS Notes:

  • Quirks-mode pages are not recommended. (read why)
  • Use the following ONLY for quirk-mode pages (not standard-mode pages).
  • Note: The conditional comments override previous directives. They must be deployed in the <head> section of your page, AFTER the normal PZ3 CSS (if the normal PZ3 CSS is also in the <head> section). Not an issue for PZ3 CSS deployed in a separate CSS file.

<style type="text/css">

/* Photo-Caption PZ3 CSS (The Good Stuff) */

<< Normal PZ3 CSS Stuff HERE >>

</style>

<!--[if IE 6]>
<style type="text/css">
.PZ3 a:hover { border:0; }
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
/* IE 7 Quirks Mode Fix */
.PZ3zoom a:hover { margin-right:-101%; }
</style>
<![endif]-->

<!-- End Photo-Caption Zoom CSS -->