Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
What's more fun for a developer than to show up a huge online company like eBay? How about getting PAID to do it! Here's the write-up from my one, fun summertime web project - a pure CSS eBay photo gallery. (Oh and just for grins, it's displayed in another "Arti-zine" web design). I miss having time to write more blog articles!!
This summer, I have concentrated on work around the house and property (living the real life, as opposed to a virtual life). It keeps my wife happy(er), but it means a lot fewer web projects and contributions to this website.
One of the web projects that I did take on, however, was a fun one. A British web developer and programmer, had a client that wanted a photo gallery "like the eBay photo gallery" for his online auction site. The rub? They wanted a pure-CSS version.
Because it's fun to show a well-known online powerhouse how the web should work - and because there was development funding - I dived into the project enthusiastically. (Ahem - only after my daily, real life chores were complete).
The result - A pure CSS photo gallery that looks identical to the eBay gallery and which has significant improvements:
- It's completely accessible,
- is cross-browser compatible and
- contains error-free, web-standard XHTML and CSS code.
In short - it rocks!
Sometimes we include a list of "additional information" links at the end of our articles. Generally, they've been styled on the fly, but we thought it was high time to spend a bit of attention on this detail. The resulting CSS-styled ordered list looks nice, includes a block hover effect, a "visited" status indicator and is XHTML/CSS valid. We thought people might like to use it on their website, so included a tutorial and ZIP file.
Adding Pizazz to an Ordered List
A lot of online articles include, at the end of the article, a list of "additional resources" - or links - for further reading and research. Several Randsco articles have such a list, but styling them is generally an afterthought, because most of the energy goes into the article itself.
Ideally, additional information links would be contained in an ordered list. It's semantically correct and allows visitors to reference a particular link by number. Unfortunately, we don't always follow our own advice and some of these links are held in simple paragraphs which may, or may not, be numbered.
Have a look at the demo page and read on to get the ZIP file, learn about the design, look at the code and see the live example.
Article updated with new information from the W3C - July 2009
I've advocated for XHTML and CSS, thinking it was the future of the web. I'm no longer convinced of this. We've decided to go back to well-formed tag soup XHTML after realizing the price for serving the "application/xhtml+xml" MIME type wasn't worth the cost. Find out why
Back to XHTML v1.0 Strict and text/html
In other words: "Well-formed Tag Soup"
Since late 2005, we've been serving our pages as XHTML v1.1, using the application/xhtml+xml MIME type for those browsers - notably FireFox, Opera & Safari - that understand it. (To do this, we used server-side scripting to set the MIME type in the header. For more about the technique, read this 2005 article - "Are You Serving XHTML with the Wrong MIME Type?")
XHTML v1.1 has only negligible coding changes from XHTML v1.0 strict. However, unlike XHTML v1.0, its supposed to be served as an XML document (hence the MIME type). So what? Well, serving XML-based web documents (XHTML v1.1 as application/xhtml+xml) comes at a huge price and we're tired of paying it (and our readers are too - *cough* most notably ¥åßßå).
Originally, we viewed XHTML v1.0 as predecessor of HTML, since it was standard-based and eliminated the problems of proprietary tags and sloppy coding. We blindly migrated to XHTML v1.1, thinking we were further future-proofing our pages. HA!
The future direction of the web (XHTML and HTML) is muddled. Consider: HTML isn't being phased out; developers of browsers such as FireFox, Opera and Safari are lobbying for (and developing) HTML 5; the W3C has renewed the HTML working group; and the Chief Technical Officer of Opera says, "I don't think XHTML is a realistic option for the masses. HTML 5 is it." [sources]
To find out what price our readers will no longer have to pay, and more about XHTML v2.0 and HTML 5 ... read on
Photo-Caption Zoom images have been problematic in IE tables. It's yet another failure of IE6 and IE7. However, I've spent some time and made a work-a-round that yields good cross-browser results (and overcomes the IE tables problem). Have a look -
Photo-Caption Zoom Inside an Internet Explorer Table
You like Photo-caption Zoom. You've finally found a valid, pure-CSS, easy-to-use technique that shows both a thumbnail and zoom-able detailed image (along with a caption), without your visitor having to leave a page or suffer through another pop-up window. You deploy it inside of a table and suddenly, when you view it in Internet Explorer, it doesn't work right.
I've received many emails and comments from people about Photo-caption Zoom not working inside an IE table. Up until now, the only "solution" was to say, "don't use tables", quickly followed by "Internet Explorer sucks". (I had one desperate client for whom I "welded-on" a series of Photo-zoom DIVs to the edge of a table. It was my first stab at a work-a-round and it worked fine, until the font size was changed).
While it's comforting to me that the problem isn't the Photo-caption Zoom code (it's an Internet Explorer problem), this isn't much solace for anyone wanting to use it. What's a person to do?
A Solution to the Internet Explorer Table Problem
I recently had a play with Photo-zoom inside of tables. I was able to isolate the Internet Explorer problem and find a work-a-round. It side-steps the IE tables problem and also works in other browsers. Have a look.
The table below contains Photo-caption Zoom images. It works in both IE6 and IE7 (as well as Opera9, Netscape9 and Firefox2). Yay! Finally - a way to use PZ3 inside tables.
To learn more about the Internet Explorer tables problem and work-a-round, read on ...
pop-Info - (A CSS Technique for Popping Information)
AFAIK everyone likes the <acronym> tag. Hey, it provides a nifty way to expand an acronym (or abbreviation ... or other abuses) into "more information". This detail shows in a tool-tip, when you move your mouse over it. Nice.
This is an example of a sidebar (a short, often boxed, auxiliary news story that is printed alongside a longer article). It often contains additional, contrasting or late-breaking news.
On a web page, the sidebar breaks up the flow of the main article and takes up page real-estate. Why not have it display like an acronym (hidden ... until the visitor decides they want to see it)?
I expanded on the idea, using an info class with a <span> tag, to provide more information on a concept or word. Cool.
Unfortunately, it's limited to a short amount of text.
What if you want to include more information about some detail of the main article? What if you want to include an image? What do you do then?
In journalistic jargon, we've now entered the realm of the sidebar. A sidebar is a short news story, containing supplementary information, which is shown alongside the feature story, often in a box. It's similar to a pull-quote or callout.
What if a sidebar could display like an acronym, in some type of a tool-tip-type hover? Hmmm. After playing a bit with photo-caption zoom figure numbers, I got the idea that such an idea might be achievable. It is! Have a look at a popInfo Sidebar box "PopInfo" Sidebar BOOM! A popping sidebar! Centered for liquid layouts, it can pop anywhere for fixed-width layouts. Add images and other styling. It's XHTML & CSS-valid, cross-browser compatible (IE6, IE7, Opera, Netscape, FireFox, Safari) & we think it's a cool way of displaying "more information", saving page real estate and amping page SEO. .
For more popInfo examples, a click-version, the CSS and XHTML code, as well as a discussion on the method ... sally forth ...