Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40
Filed in:CSS
The Web

z-index on a:hover elements

September 11th, 2005  · stk

An(other) IE6 Shortcoming

UPDATE 10-May-2006: Thanks to Stu Nicholls & ¥åßßå, I have found an effective work-a-round for this IE z-index issue. (See the solution).

I developed the second, more advanced version of the pure-CSS Photo Zoom (PZ2) 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 PZ2s 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...

Read full story...

Views: 147215 views
29 Comments · GuestBook
default pin-it button
Updated: 24-Jul-2008
Web View Count: 147215 viewsLast Web Update: 24-Jul-2008
Filed in:CSS
Site News·b2evo

Introducing: Photo-Caption Zoom 2

June 15th, 2005  · stk


The images on your left are a demonstration of the new and improved Pure-CSS PZ2 "Pure-CSS Photo/Caption Zoom (Version 2)".

The images expand upon mouseover, displaying a larger image and corresponding caption (just like the original), but this advanced version won't distrupt the flow of the XHTML page.

As I learn more about CSS, I've tried to improve upon the original Pure-CSS Photo/Caption Zoom (or PZ as a certain someone from India likes to call it!)

This is the third attempt now, and "by jove", I believe I've got it! (Of course, I'm referring to the holy grail of Photo Zooms ... the OVERLAY method - where the image doesn't jolt/shift/migrate/move the text and surrounding elements).

The technique employed here is not without it's eccentricities, as it is not nearly as easy to deploy as the original. However, it remains much more user-friendly than it's progenitor - "Magnify Image", which requires the use of two image files. In contrast, PZ2 uses a single image file, saving both bandwidth and headache - and of course - adds the capability of a nicely styled caption.

Compared to the original Photo/Caption Zoom, PZ2 requires the use of an extra <div>, prior to the normal PZ code. Why? Because the only way to keep things from shifing is to use "position:absolute" (which removes the element from the document flow). However ... this doesn't really work for showing the un-zoomed image (as it would overlay the text). So ... to overcome this problem, one can place an empty <div> (sized to the photo) UNDERNEATH the "absolutely" positioned image. Boom. Text can be READ!

Of course, in order to place the empty <div>, one needs to know it's dimensions. Sadly, width is not enough. So ... whereas the original Photo/Caption Zoom utilized ONLY width, PZ2 requires the height (only the thumbnail height and it's entered directly into the HTML).

There is another idiocyncracy of this second version and I blame it COMPLETELY on MSIE (as it isn't an issue with FireFox). The MSIE problem: they (currently) don't differentiate between the z-index of an un-hovered -vs- hovered element. WHAT? The bottom line: To satisfy MSIE, each PZ2 image MUST be uniquely named and be assigned a z-index value greater than the image that follows, or it won't "overlay" that image.

Edit: A work-a-round to overcome this problem has been discovered and applied to the next version - Photo-caption Zoom Version 3 (PZ3).

This isn't a problem within the post, but becomes difficult to manage from post-to-post. Bottom line: don't place PZ2 images near the bottom and for images that expand to tall dimensions ... place them near the top.

One other thing. The overlay (position:absolute) method dictates that ALL images open from the upper left-hand corner. No big deal for images floated left, but for images floated right - be aware.

Edit: Not an issue in the next version - Photo-caption Zoom Version 3 (PZ3).

I hope that this little demonstration has whetted your appetite for more, however, with the workload currently sitting on my desk, it will be some time before I'm able to properly document everything and make it available for public consumption (CSS code, XHTML code and b2evo-specific instructions).

Hang tight ... as I WILL get around to doing this. Check back periodically (or, if you so desire) skids can be greased via PayPal ;) (Just email to get the correct address).


Views: 38484 views
15 Comments · GuestBook
default pin-it button
Updated: 22-Feb-2008
Web View Count: 38484 viewsLast Web Update: 22-Feb-2008
Filed in:Our Life

April Showers bring May Flowers

June 12th, 2005  · stk

In Edmonton, it's more like "April snow - June show"! It seems that only a short while ago, I was shoveling mounds of snow and the whole yard was blanketed (NO ... smothered) in a covering of white. Fortunately, the show-shovel broke at the appropriate time and we're now enjoying a bountiful summer.

However the saying goes ... the time to be in Edmonton is NOW. Flowers are blooming all over the place and it's completely amazing. (Of course, Alex is bent on destruction and thinks that each bloom is something for "pick and play", rather than "show and tell". Our irises have taken quite a beating, recently. And so have a number of our other plants! The only exception, of course, is the dandelion. Although Alex does love the yellow blooms, she often passes them by, in favor of the more rare, exotic and alluring flowers. You know ... the ones we want to keep!)

It's difficult to believe that the summer solstice is still a week or so away. We go to bed now at 10:30 PM and it's still light out. Wake up at 4:30 AM ... it's still light out!! (Where was all this light in the winter, when we REALLY needed it?) Our neighbor, Paul, across the lane (who loves a good joke) ... was eager to point out to Scott that, "Soon will come the soltice and 2 weeks after -- the first frost." YIKES!! Scott's nether regions puckered up as he thought of the prospect. ANOTHER winter ... OMG!

Southern Alberta has been innundated with rain these past few weeks. Not here. In fact, up till the day-before-yesterday, Scott was hand-watering the back yard and dancing a jig, just hoping that 1/8th indian blood would result in SOMETHING "aqua". (Of course, if we were REALLY desperate, we could have expended the energy and actually WASHED the car ... which is 10X better than any native American dance, as far as producing rain.) We were too lazy, I quess. The rain dance was as much as we could muster and fortunately, it's paid off ... because, during the past two days, Edmonton has looked more like Vancouver.

Well ... the summer plans are laid and we'll be embarking on a trip in less than a month's time. Nothing like the PCT Hike we did in 2002. More of a 'family visit' thing ... Vancouver, Red Bluff, Seattle and a few points in between (okay ... mostly pit stops at the local 7-11, where Scott can test the water depth ... ;) ). Hey! It's tought to time your pit-stops with your pee stops. Ask my grandpa (God rest his soul) ... who wrote a letter to the oil companies, complaining of his peeStop-pitStop dilemma. "You go gramps!")

Back to the flowers. They're not ALL from our backyard, but they ARE from backyards ... three of them ... all in our immediate vicinity. (1) Anna, who lives next door. She's a single lady that emmigrated from Ghana, Africa and runs a couple physical therapy practices. (2) Paul, (the Oop's buddy) from across the lane. He's an ex-firefighter who lost his wife a number of years ago to breast cancer. (3) Our very own yard (at least, whatever the Oop hasn't eaten, mutilated or spindled)!

Funny, but because the weather has turned, we're getting to know folks again. (Everyone was shuttered in for the bulk of the winter months, just like us). BBQ parties, go-carts up and down the alley, kids staying up and playing into the night ... are among the new sounds that we hear, well into the twilight.

Lawn-mowing has resumed again (with a fevor), as rain only makes the grasses grow. Dandelions (the second-batch ... "the reinforcements") are coming up as thick as thieves. The spot that the cat peed in all winter-long? THE BEST and THICKEST grass around! (Nice to see that our expenditure in cat food paid off! Now ... if we can only get him to 'spread it around'!)

I hope that you've enjoyed the flower show. Some of these things, like the 'bleeding heart', I never really noticed (or saw) until I migrated north. Yes ... I definitely miss the Yuccas, the palms, citrus and other plants of the desert. I especially miss the smell of the desert after a rain storm, when the wetting of sage and creosote yields an especially wonderful aroma ... or the early spring scent of orange trees in bloom. Those who live in the American south-west know what I'm talking about. (Before I die, I want to find a way to bottle that smell and sell it, because it is so fresh and so pure.) :)

The lesson here, I think, is to enjoy where you are, in the moment, as you never know when that smell, that sunset, that feeling, will be the last.

Did'ja notice? This is our first post using the hot-off-the-presses "Photo/Caption Zoom" version two!

Views: 41511 views
2 Comments · GuestBook
default pin-it button
Updated: 24-Nov-2007
Web View Count: 41511 viewsLast Web Update: 24-Nov-2007
Filed in:b2evo

Photo Zoom: b2evo How-to

April 23rd, 2005  · stk

Getting the Photo/Caption Zoom Working in your Blogs

When I posted the CSS Photo-Caption Zoom entry, it was meant for a larger web audience than just b2evolution users. However, since I posted an entry about it on the b2evolution forums, I've been getting some questions about how (exactly) to get it going in a b2evoution blog.

The nail was hit squarely on the head, when Bomani left a comment saying:

I've searched your site and I'm trying to find explicit instructions on "how" and "where" to enter the code to use the Photo-Zoom feature in b2volution.

I see the code (html, css), but I have no idea on where they should be inserted.

Please help!

If beaten about the head soundly enough emails, comments and the like, even I can take a hint! ;)

To get the photo/caption zoom working on your b2evo blog, read on!

Read full story...

Views: 53538 views
20 Comments · GuestBook
default pin-it button
Updated: 14-Oct-2005
Web View Count: 53538 viewsLast Web Update: 14-Oct-2005
Filed in:b2evo

Blog Button Rollover Images

April 15th, 2005  · stk

Putting a Face to a Name

Lots of folks like b2evolution's multi-blogging capabilities and use it to create a community of bloggers (family members, artist's groups, church congregations, to name a few). This often means that the blog name is the author's name. Why not (like Adam asked) associate an image with each author, so that when you hover over the blog button, you see their photo? (The image on the right shows an example for "Jessica's Blog").

Great idea Adam!

Our blog isn't a multi-blog, so I was reluctant to pursue this question, because I couldn't test it. Unbeknownst to Adam, the technique he wanted to use (Eric Meyer's pure CSS pop-up) is similar to the one I (independently) developed for our image/caption zoom (the "pop" demonstrated by many of the images here). This hooked me!

First, I made a mock-up of Adam's page, where you can see the rollover concept in action and view the inline CSS & HTML using 'view source'. I then dusted off my server software (yellowtip), fired up the demonstration b2evo blog (which IS a multi-blog) and got the whole thing working on my desktop.

This tutorial will provide xhtml(strict)-valid code and use a pure-CSS method to create image rollovers for b2evolution blog buttons. It works with both MSIE and FireFox browsers. Further, this rollover technique can be applied to ANY link, not just b2evolution blog buttons, though this is the focus.

If this is something you might like to add to your site, read on ...

Read full story...

Views: 72585 views
4 Comments · GuestBook
default pin-it button
Updated: 21-Nov-2005
Web View Count: 72585 viewsLast Web Update: 21-Nov-2005