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: 17287 views
2 Comments · GuestBook
default pin-it button
Updated: 6-Aug-2008
Web View Count: 17287 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: 39972 views
5 Comments · GuestBook
default pin-it button
Updated: 24-Oct-2008
Web View Count: 39972 viewsLast Web Update: 24-Oct-2008

Christmas Photo Gallery

February 21st, 2007  · stk

Have a look at my first pass attempt to find a pure-CSS photo gallery that be displayed with in-line text. Display as many images as you want to impose on your visitors! Demonstration uses family photos from Christmas photos

First-pass at a Pure-CSS PZ3 Photo Gallery

pz3 photo gallery

Around Christmas, I had an idea for a way to display a multitude of images in a pure-CSS photo-zoom gallery, utilizing Photo-caption Zoom v3 (PZ3).

Many people like PZ3, but some try to use it to build a photo gallery. I designed it to add zoomed images (and an optional caption), into XHTML pages. While it works great - is easy to deploy, saves page real-estate, looks nice - it doesn't handle multitudes of images very well (at least, not "out of the box").

Until now.

I've finally taken the time to play with it a bit (it took most of yesterday morning to hack through the details ... and then most of the afternoon and night to put it all together into a demonstration). :D

If you're into CSS, like PZ3 ... or want to see 40+ family Christmas photos ... read on! (Dial-up visitors beware ... image data ahead!)

Read full story...

(Permalink)
Views: 58382 views
18 Comments · GuestBook
default pin-it button
Updated: 25-Nov-2008
Web View Count: 58382 viewsLast Web Update: 25-Nov-2008
Filed in:CSS
Web Dev·The Web

PZ3 & Opera v9.02

November 15th, 2006  · stk

Photo-caption Zoom v3 can fail in the latest Opera version (v9.02). It appears to be a problem with the Opera upgrade process. Learn mody ...

A Flip'n, Zooming Upgrade Problem

I've recently tweaked the Photo-Caption Zoom v3 code, to provide support for IE7 and quirks-mode. (I'm still testing it, so the only place you can see it, for now, is in this Randsco new article.)

In fact, I wanted to test if further, by using it on our own website.

I uploaded the CSS and began modifying some XHTML, when I thought, "I'd better check, before I convert too much, that it works in all the browsers."

Low and behold, it didn't "Zoom" properly in Opera v9.02.

"That's odd," I thought, "I'm sure I tested it in Opera when I made the modifications."

Turns out, I did.

If you're experiencing problems with Photo-Caption Zoom v3 in Opera v9.02, read on ...

Read full story...

(Permalink)
Views: 8355 views
4 Comments · GuestBook
default pin-it button
Updated: 6-Aug-2008
Web View Count: 8355 viewsLast Web Update: 6-Aug-2008
Filed in:Site News
Web Dev·CSS

Pretty in Print

August 30th, 2006  · stk

How do your printed pages look? When we saw that ours were horrid, Scott whipped the print.css file into shape. Read about the pros and cons of using CSS to make pretty print pages.

Using CSS to Format the Printed Page

Back in my office-working days, I knew a guy named Clint, who didn't like reading his email on the computer screen. He'd print each email, every morning, read through the print-outs, file the important messages and deep-six the others. I wonder if he still does that?

Who really reads online stuff, offline? Not me!

But who am I to criticize and judge others in their efforts at deforestation, eh? Isn't the Internet is supposed to be accessible to all - even folks who prefer reading online content, offline?

For accessibility reasons, innate curiosity and the shocking discovery that our printed pages looked horrible, I decided to spend some time and pretty them up. If you think visitors might want to print your blog articles (for reference or offline reading), then think about using Cascading Style Sheets to format the page.

Read on to see what a difference it made to our pages...

Read full story...

(Permalink)
Views: 14263 views
2 Comments · GuestBook
default pin-it button
Updated: 6-Aug-2008
Web View Count: 14263 viewsLast Web Update: 6-Aug-2008