Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

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...

Views: 41993 views
19 Comments · GuestBook
default pin-it button
Updated: 4-Mar-2006
Web View Count: 41993 viewsLast Web Update: 4-Mar-2006
Filed in:CSS

PZ2 - How2

October 14th, 2005  · stk

Getting Photo-Caption Zoom (version 2) Up & Running on Your Site
(Instructions, Examples & Considerations)

In an effort to deflect a myriad of questions from readers who wanting to implement the pure-CSS photo/caption zoom (version 2) on their site - demonstrated with the photo here - I'm making this "How-to" guide. It contains the information needed to install and use it.

This photo/caption zoom technique is written to CSS 2.0 and XHTML 1.1 standards (which you can verify, using the validation buttons at the bottom of this page, if you so desire). It's been tested on both IE and FireFox. (Note: When IE7 comes out - which will support the :hover pseudo-class for all elements - the code will likely be re-written more succinctly).

PZ2 is the second version of "photo/caption zoom". This newer version overlays the text (eliminating 'text and element migration'), it allows larger images to be displayed on a page (because the image can overlay menu items and other DIVS) and it has some built-in display toggles (you can turn the caption on/off, for example). All that good stuff, unfortunately, comes at a price. The code is longer, more complex and therefore, trickier to use. (Hence the need for this tutorial.)

If you're new to the "photo/caption zoom" method displayed here, it's recommended that you read "CSS Photo-Caption Zoom" to start. It provides a history behind its development, as well as a demonstration of various 'photo zoom' techniques.

If you just want to get PZ2 working on your page (special instructions for b2evolution users), by all means, READ ON ...

Views: 60571 views
13 Comments · GuestBook
default pin-it button
Updated: 26-Feb-2006
Web View Count: 60571 viewsLast Web Update: 26-Feb-2006

SpamBack - Green Eggs & SPAM

June 29th, 2005  · stk

Serving a Tasty Dish for Any Spammer

Maybe I have a soft spot for the spammers? After removing all the "mailto:" references and entity-encoded email addresses from the site, email harvesting programs don't yield a single thing. That just doesn't seem right. So, using a process coined SpamBack "Green Eggs and SPAM", I changed that!

If the thought of giving spammers a dose of their own medicine is appealing to you, read on ...

Read full story...

Views: 13035 views
6 Comments · GuestBook
default pin-it button
Updated: 21-Aug-2005
Web View Count: 13035 viewsLast Web Update: 21-Aug-2005

SPAM, lovely SPAM, wonderful SPAM

June 23rd, 2005  · stk

Keep Your Email From Being "Harvested"

If you have an email address, I bet that you don't like all the unsolicited mail (SPAM) you receive. It's a waste of time. Mortgage refinancing, cheap software, "urgent" messages from Nigerians needing help (offering a percentage of 'millions' for assistance), links to XXX movies and pics ... these are but a few of the SPAM messages that made it past Yahoo's filter and into the inbox. What's a person to do?

Entity Values are a sneaky way of entering characters in HTML code. Instead of typing the letter "r" in - - one can put "r" (ascii) or "r" (hex) instead.

On the screen, it still looks like - - the entity values are converted to characters on the screen, by the browser. A harvesting bot, blindly looking at HTML code, sees only the string (depending on how the ascii and hex entity values were mixed). Doesn't look like an email address, does it?

It's a technique that used to be effective. (Notice that the browser didn't format the entity value email, because it didn't "recognize" it as an email address? In a similar fashion, the technique would fool email harvesting bots. The bot passed over the string, thinking it was more HTML gibberish).

If you've got a website - Don't give the spammers your email address by posting it on your site! Email-harvesting spiders (or bots) are programs that spammers use to search through website code for thousands of sites every day, scooping up discernable email addresses. They key in on the "@" character (an address requirement) or the "mailto:" hyperlink reference in the <a> tag. I recently reviewed the 'harvestability' of and discovered entity value encoding (see sidebar) no longer effectively "hides" addresses from harvesting bots. The programs have gotten smarter and many are now able to decipher entity values. It's high time for a new plan.

Not allowing email contact, you might think, is an option. Not for me. A contact link is a web-design requirement. Only poorly designed web pages do not provide a contact link and most of the better designed pages provide a link on EVERY page. Besides, if you don't put up a contact link because you wish to avoid SPAM, aren't you really giving in to the spammers? (I'd rather "out-smart" than "give-in".) ;)

After the overhaul, there are no longer any entity encoded email addresses or "mailto:" references, on the site . Now, not only isn't our email displayed, but there are even MORE ways for visitors to make email contact!

  • (1) PHP email form (fast and easy)
  • (2) javaScript-encrypted email links (the new "hide" technique)
  • (3) email image display (security and accessiblility)

The contact link (on the banner), displays on both b2evo and non-b2evo pages, alike. The link takes you to the contact page (which is integrated with the b2evolution and isn't a core hack), offering two methods for contact - the php form or email links (the non-java method kicks in, if you choose an email link and have javascripting turned off). After completing the php form, the script takes you back to whatever page you came from. There's also some error-checking to make sure that fields on the form are filled in properly. Nifty!

Go ahead, kick the tires and take it around the block for a spin. To learn more about SPAM, avoid SPAM, test the vulnerability of your site to harvesting, install a similar contact form on your b2evo installation or if you just want to watch the Monty Python SPAM skit (??) ... read on!

Read full story...

Views: 10459 views
4 Comments · GuestBook
default pin-it button
Updated: 23-Jun-2005
Web View Count: 10459 viewsLast Web Update: 23-Jun-2005
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