Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40
Filed in:CSS
Web Dev·XHTML

PZ3 Figure Numbers

April 22nd, 2007  · stk

Can you add figure numbers to Photo-caption zoom thumbnail images? Sure! What's the best way? I dunno. I had a play with some variations

A reader emailed, asking if there was a way to modify PZ3 to provide a figure number overlay, such that it showed on a thumbnail, but disappeared on hover. It sounded like an interesting modification, so I had a bit of a play with it, this morning and this is what I came up with.

There's a number of ways of doing this and I've shown the most straight forward here - "Figure 1" text that is centered over the thumbnail and disappears, when the image is zoomed (moused over).

For some other variations, including some fun with opacity, read on ...

 

Read full story...

(Permalink)
Views: 17812 views
2 Comments · GuestBook
default pin-it button
Updated: 6-Aug-2008
Web View Count: 17812 viewsLast Web Update: 6-Aug-2008
Filed in:The Web
Web Dev·CSS·XHTML

About Quirks-Mode

March 12th, 2007  · stk

I recently had to fight with CSS for a web page served in Quirks-Mode. What is quirks? Why is it bad? How do you tell if a page is in quirks-mode? All this (plus a couple of extra cents, tools & links)

curl

Using PZ3 in Quirks-Mode

A reader wanted to use PZ3 for a page that was authored in "quirks-mode". In an effort to help, I found a way to make it work in IE6.

browser quirks mode

Now that IE7 is out, I wish I hadn't. Let me just say that it's awful thing to do (author pages in "quirks-mode") and I recommend against it. You will thank me, your children with thank me and your descendants will visit my grave and thank me!

However, even though it goes against my own advice, I have found a way to render a very-close approximation to PZ3 for BOTH IE6 and IE7, in quirks mode. If you absolutely must deploy PZ3 on a quirks-mode page, you will want to see the work-a-round (and maybe even the quirky problem).

PZ3 aside, I thought this a good time to weigh in on quirks-mode.

  • What is "quirks-mode"?
  • Why is quirks-mode bad?
  • Why do people need quirks-mode at all?
  • How do you tell if a page is in quirks-mode?
  • How does an author pick the mode (standards -vs- quirks)?

For all this (and a tad more) ... carry on.

 

Read full story...

(Permalink)
Views: 40510 views
5 Comments · GuestBook
default pin-it button
Updated: 24-Oct-2008
Web View Count: 40510 viewsLast Web Update: 24-Oct-2008
Filed in:XHTML
The Web

Die Tables Die

February 2nd, 2007  · stk

Don't web designers now know NOT TO USE TABLES FOR PAGE LAYOUT? I thought so, but an email, received from the President of a web media company, says otherwise

Tables for tabular data ONLY ... NOT for LAYOUT!!

tableless designs

Last night, I had an interesting e-mail exchange, in which someone was using an ASP.net datalist to display three PZ3 images in a row. They were having problems with IE. (No surprise there). :p

First, I know very little about ASP.net, but I asked the fellow for a copy of the page (X)HTML and CSS and said I'd look into the problem.

It was a basic page, nothing too odd (though I did notice a bunch of ASP.net-specific bloat). I quickly found the problem: the fellow was using a table to contain the single row of three PZ3 images, each in their own cell (browsers often fail to correctly interpret CSS directives inside table cells).

I haven't used tables for layout in years and assumed that (by now) the message to do so, would've gotten out. Obviously not.

I wrote back and said, "Using a table to hold the three images is semantically incorrect (because no tabular data are being displayed) and the root of your problem. To fix it, just take the three images out of the table." I even provided some XHTML-valid code that would accomplish what he wanted (semantically correct and more succinct).

The response I got back, floored me.

I am displaying data from a [sic] XML file that display files. Those images are in each cell, so yes I am displaying tabular data. (emphasis mine)

Huh?

Maybe what he's trying to say is that "he can't get rid of the table", but if so, it's because of a limitation in the ASP.net language he's using and not because it's semantically incorrect to do so. At the end of the day, it doesn't matter how ASP.net stores/retrieves/interprets the image data, what does matter is:

Displaying three images in a row, is NOT a display of "tabular data".

To top it off, this fellow isn't just anyone, he's the President of a web media company. He should KNOW BETTER!

The exchange bothered me enough that I thought I'd write my own version of "What I think should be tacitly understood anyone writing HTML code".

To find out why tables are bad (should be used for displaying tabular data, NOT FOR LAYOUT) and what is "tabular data" anyway? .... read on.

 

Read full story...

(Permalink)
Views: 29854 views
18 Comments · GuestBook
default pin-it button
Updated: 25-Nov-2008
Web View Count: 29854 viewsLast Web Update: 25-Nov-2008

Photo-Caption Zoom v3

April 10th, 2006  · stk

Introducing Photo-caption Zoom (version 3)! If you liked earlier versions, you'll love PZ3. The IE z-index bug is squashed, no more image resizing, choose thumb sizes 'on-the-fly' & do it with 70% less code. The easiest PZ ever. This version does more, with much less.

EZ PZ3 - Better, easier, lighter.

Latest Version: v080630 Changes: see red text w/yellow background, where applicable.

Images in this article utilize the newest, third version of a pure-CSS image zooming technique I've named "Photo-caption Zoom" ( or PZ3 ). When you move your mouse over an image, it will 'zoom' to reveal a larger image with a caption. There are a variety of pure-CSS image zooming methods, but this was the first to combine an image with a caption. It saves page real estate, it looks nice and this third version is more robust and easier to use than ever.

Although the end results of PZ3 appear identical to the last version (PZ2), the underlying CSS methodology is completely different! PZ3 offers significant improvements over PZ2 and does it with nearly 70% less code. It does more, with a lot less!

PZ3 satisfies most everything on my original wish list for a photo-caption solution. This version is the culmination of over a year's-worth of trial & error, of CSS/XHTML learning & experimentation and of countless hours searching the Internet for existing solutions. The results of PZ3 speak for themselves.

- PZ HZtory -
Photo-caption Zoom is a pure-CSS, xhtml-valid technique that I developed over a year ago. It zooms a thumbnail image on mouseover, showing a larger picture with a caption. It uses a single, simple image for both the thumbnail and zoom. It's designed to be easily deployed.

  • PZ1 - Jan 31, 2005: The original. It rearranges page flow, making room for the zoomed image and its caption. (i.e., one can still read the document when the image is zoomed).
  • PZ2 - Jun 15, 2005: Version 2. The zoomed image overlays the document, which means that page elements no longer shift or migrate. (A IE z-index bug is documented and a work-a-round is achieved, which limits usage).
  • PZ3 - Apr 11, 2006: This third version supercedes its predecessor - PZ2. The IE z-index bug that limits PZ2 has been fixed, it's 70% lighter (less code), and pixel-perfect thumb/zoom sizes are defined in the HTML. Basically, it rocks! It's so easy, I'm calling it EZ-PZ.
  • PZ3 - 30-Jun-2008: Version numbers added (dated version numbers, starting with "v080630", have been added to the CSS file, so users can tell at a glance if they have the latest CSS/XHTML code)

    CSS corrected to allow correct toggling of the caption (Cap|noCap option)

If you're new to the Photo-caption Zoom technique, I recommend you begin here, which has links to all the Photo-caption Zoom pages on this website and covers 9 different methods, in detail. (Even those that I investigated early on). Each has cut'n-paste CSS/XHTML code you can use on your own pages.

Collaborating to develop PZ3 proves that two heads are better than one. This code resulted from batting it back and forth, across the Atlantic Ocean, to my U.K. business partner and mate, ¥åßßå. I owe him a deep debt of gratitude for his efforts and the time he spent helping me. Thanks ¥åßßå!

Feature List
(Items in RED are enhancements over PZ2)

•  Valid XHTML code
•  Pure-CSS (no javascript)
•  Cross-browser/Cross-platform compliant
•  Single image for both thumb/zoom
•  Nice-looking (customizable) caption
•  Overlays document (no layout shifting)
•  IE z-index bug: SQUASHED!
•  No image resizing necessary!
•  Thumb sizes defined on the fly!
•  Toggle borders on|off
•  Toggle link cursor on|off
•  Toggle caption on|off
•  Code reduced by nearly 70%
•  Quirks-mode support
•  30-Jun-2008 - Version numbers added
•  Easiest PZ ever - EZ-PZ!

The code is cross-browser/platform compatible: PC Browsers tested - MSIE (IE6, IE7 & IE8), Firefox (v1.5, v2.0 & v3.x), Netscape (v8 & v9), & Opera (v8.x, v9.02§, v9.x); winSafari; Google Chrome (v1 & v2); Flock (v1 & v2); Mac Browsers tested - Firefox, Opera and Safari (v2.x & v3.x).

To date, there have been no reported browser problems. Please comment on viewbility if you're using a different [O/S|browser] combination.

To get the code and learn more about PZ3, please continue ...


§ Problems with Opera v9.02?

Read full story...

(Permalink)
Views: 248008 views
158 Comments · GuestBook
default pin-it button
Updated: 6-Sep-2011
Web View Count: 248008 viewsLast Web Update: 6-Sep-2011

Are You Serving XHTML with the Wrong MIME Type?

November 10th, 2005  · stk

20-Feb-2006 UPDATE: Code modifications strengthen the PHP script.

We've had our b2evolution blog for just under a year. One of the reasons we picked b2evolution, was because it was written to XHTML standards. Like many b2evolution "skins", ours has a W3C validation button, which boasts of our XHTML compliance. Great!

So I was, stretching my technological legs and validating to the XHTML 1.0 (Strict) standard. Then, six months later, I realize there's a newer version (XHTML 1.1). What? To keep up with the technological Jone's, I begin validating to THAT. However (I find out, a few months later) that THIS WHOLE TIME - despite my learning XHTML, careful coding and validation frustration - our pages are being served as PLAIN OLD HTML!

Plain old HTML?

Pace Picante sauce aside, this causes me to pause. What am I doing wrong? I'm validating against the the XHTML 1.1 standard (it says so when I hit the W3C validation button). I've got the XHTML 1.1 DocType statement. I've even have a Meta tag that SAYS the "Content-Type" is "application/xhtml+xml". I should be all set, right? Wrong.

In a totally twisted plot that involves the Pope, GWB & a hoard of marauding Vikings, I discover that I'm not alone. MOST PEOPLE using XHTML serve their pages the same way ... as plain old HTML.

To find out why and to find out how to serve your pages as true XHTML ... read on.

Read full story...

(Permalink)
Views: 41878 views
19 Comments · GuestBook
default pin-it button
Updated: 4-Mar-2006
Web View Count: 41878 viewsLast Web Update: 4-Mar-2006
Newest ··· 4321 ··· Oldest
[ Back to Top ]