CSS Photo-Caption Zoom

"Photo Zoom 3" (PZ3)

March 10th, 2007 (fix)

Pure CSS Photo-Caption Zoom (Version 3)

Demo: Quirks Mode Problem (IE6 + IE7)

Click here to see the quirks work-a-round.

First, I advise against deploying pages with a doctype that invokes quirks-mode. (Basically, it's a way of making an older web page maintain a degree of backwards compatibility and still try to implement the newer web standards, notably CSS). But it's a kind of limbo-land, half honoring standards-compliant code and half trying to sift through tag-soup code. I recommend, instead, to author completely XHTML and CSS-valid, web-standardized pages. However, depending on your needs, you may need to the quirks-mode.

THE PROBLEM: In quirks mode, the browser tried to honor the new XHTML and CSS directives, but also go back in time, honoring to what that browser understood, then. The big problem is that it's a moving target, as each browser heads back to (their separate) roots. IE tries to emulate IE5 and FireFox tries to emulate Netscape 4. What you get is visual mush. Even the same browser doesn't render identically. Take this page, for example. Depending on whether you're using IE6 or IE7, you'll see different things.

IN IE6 - The caption width appears wrong, when the image is zoomed. You might think that the only problem, but it's not. If you move your mouse over the zoomed image, to the top border, you'll see the zoomed image JUMP to the left, right when you hit the 1px-wide top (or right) border.

IN IE7 - The caption width appears wrong, when the image is zoomed. The zoomed image origin point for the RTL-aligned element, is interpreted on the other side of the image, which causes a horrible jump/flicker, when the image is zoomed.

FireFox doesn't have a problem on this page, if you use the FireFox rendering engine. Opera doesn't have a problem on this page. Netscape does, in either rendering mode.

Quirks is, well, just plain quirky! Which is why is sucks so much. You can't guarantee a cross-browser viewing experience and might as well just say ... "This page best viewed in [Insert Favorite Browser Here] browser."

I've also thrown up a "Check Mode" button, left, which is a bit of JavaScript that interprets whether the page is rendered in QUIRKS MODE or STANDARDS MODE. (This page should be rendered in "quirks mode").

Problem ONLY for IE6 and/or IE7 browsers (and Netscape/FireFox, depending on your rendering engine)

Links: IE7 Problem | IE7 Fix | Quirks Problem | Quirks Fix | PZ3 Home Page