Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Helping IE6 Out the Door

June 12th, 2009  · stk

Randsco No Longer Supports Internet Explorer Six

Last month, we made the decision to drop support for Internet Explorer version six (IE6). Visitors using this eight-year-old browser will see a pop-up information box, when they land here. The box says:

quote

Update Your Browser

As of May 2009, we no longer support Internet Explorer 6. The reasons for this decision are many.

We strongly recommend that you upgrade your browser to a newer version. The current version is Internet Explorer 8. The upgrade is free.

Hint: For a better browser, use FireFox.

 

To learn about our reasoning for this move, what it means for visitors, the problems with IE6 and why FireFox beats IE hands-down ... read on.

Why We Dropped Support for IE6

IE6 is listed as #8 of The 25 Worst Tech Products of All Time

- PC World Magazine   

Below is a short list of some of the reasons behind our decision to drop support for Internet Explorer 6:

  1. IE6 is old and antiquated
  2. IE6 is crappy compared to modern alternatives
  3. IE6 support costs web-developers frustration & time
  4. IE6 needs to go - now

 

IE6 Is Old

The release date for Internet Explorer Six is Aug 2001. That was before the 9/11 terrorist attacks on the World Trade Center! IE6 is older than the iPod, the television show "24", IE5 for the Mac and the Hummer H2.

At its peak, in 2003, IE6 commanded roughly 95% of the browser market and created for Microsoft, a browser monopoly that resulted in a U.S. Justice court case against the company.

Success of IE6 is attributable to a number of factors:

  • Unlike early version of Netscape & Opera, IE6 was free
  • It was bundled and integrated with the most popular O/S - Windows
  • It was the best browser available at the time and competitors were lacking

IE6 Is a Crappy Browser

IE6 may have been the best browser in 2001, but this is 2009 and eight years is an Eon of time, technologically speaking. Compared to modern browsers - which are many and all free - IE6 is wildly inferior. Here's a brief list of some reasons why:

IE6 is one of The 25 Worst Tech Products of All Time.

 

(Permalink)
Views: 19230 views
Leave a Comment · GuestBook
default pin-it button
Updated: 21-Aug-2012
Web View Count: 19230 viewsLast Web Update: 21-Aug-2012

Beautify a Resource List

May 21st, 2009  · stk

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.

We thought it was about time that we come up with a proper "additional information" list. By melding together some existing design ideas and adding our own CSS touches, we have constructed an ordered list that not only looks nice, but also includes a number of other features: a hip CSS roll-over effect; compatibility with fixed-width or liquid layouts; toggle-able ":visited" link status images; pure CSS (no JavaScript, AJAX or jQuery); and it's cross-browser friendly.

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.

Styling an Ordered List

(Permalink)
Views: 50230 views
4 Comments · GuestBook
default pin-it button
Updated: 25-May-2009
Web View Count: 50230 viewsLast Web Update: 25-May-2009
Filed in:CSS
Web Dev·The Web

Playing with Opacity

May 29th, 2008  · stk

Opacity is a CSS3 directive, but there's no reason not to start using it today. Apply it against the major browsers, validate it against the W3C CSS validator and I'll even show you a great "Before & After CSS Opacity Technique" for displaying your before-after photos

opacity overlay

hover to read

Using the CSS3 "Opacity" Directive: Future-Proof, Valid CSS and No CSS Hacks

opacity sidebar

The "Opacity" CSS directive is part of the CSS "level 3" Color Module, which is a "Candidate Recommendation". In a nutshell, this means that opacity isn't "ready for prime time".

Darn and phooey! You like opacity. And why not? It's fun to play with and you can achieve some nifty web effects using opacity. (I'll demonstrate an opacity technique that provides a great CSS-only way of showing "before" and "after" photos!)

Enjoy the MAGIC of Valid CSS3 Today!

What is opacity? Well, it's the opposite of transparency. Something that has 100% opacity is 0% transparent. Likewise, something with 0% opacity is 100% transparent.

The W3C (World Wide Web Consortium) recommends thinking of opacity as a post-processing operation. After an element (including it's children) is rendered into an image for the computer monitor, the opacity setting specifies how to blend the element into the final display.

Applying opacity to an element is easy. Simply specify the "opacity" directive to a selector and provide a value from zero to 1.0, where zero is completely transparent and 1.0 is completely opaque.

Of course, the difficulty is that the level 3 CSS candidate recommendations are only honored by a select number of web browsers, notably current versions of FireFox, Opera, Safari & Netscape. As usual, the Grand Pubah of browsers (Microsoft's Internet Explorer), doesn't adhere to this as-yet approved CSS directive.

That's the bad news.

The good news is that I'm here to tell you that if you want to use opacity for your web pages - you can! We have been for some time!

There's a way to use opacity for FireFox, Opera, Safari, as well as Internet Explorer 6 and Internet Explorer 7. (According to AWSTATS, a web server statistics program, 97% of our 113,728 April visitors used one of these browsers ... heck, that's about as close to "everyone" as you're going to get in this cross-browser world of ours!).

There's even a way to use opacity so that the CSS validates (to verify this, just click on the "CSS" validation button in the footer below)!

Best yet, it's completely future-proof and requires no CSS hacks.

OKAY ... you're primed and ready. You want to start using opacity.

All you have to do is read on, Cascading Style Sheet lovers ... read on ...

Read full story...

(Permalink)
Views: 51311 views
9 Comments · GuestBook
default pin-it button
Updated: 30-May-2008
Web View Count: 51311 viewsLast Web Update: 30-May-2008
Filed in:CSS
Web Dev·XHTML

PZ3 Inside IE Tables

February 25th, 2008  · stk

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.

Product Description Price Avail

ThermalTake TMG A1 CPU Fan

35.14 CFM max flow at speeds between 300-2,500 RPM. Quiet, reliable cooling.

The TMG A1 uses a frameless fan design that virtually eliminates noise-producing turbulance. Runs quiet at 16 dBA. Supports AMD PWM FSC specs.

$49.99

In-stock

Thermaltake Silent Case Fan (White)

63.3 CPM at 1600 RPM. This DC, 120mm case fan is very quiet (16 dBA).

Count on Thermaltake to make the worlds best cooling products. The Silent CAT fan is an intelligent choice. It runs quiet and is affordable.

$9.99

In-stock

To learn more about the Internet Explorer tables problem and work-a-round, read on ...

Read full story...

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

Rockin' da Sidebah

December 22nd, 2007  · stk

Merry Christmas! How about a pure CSS technique to finish out 2007? Introducing "pop-Info" boxes, an XHTML/CSS-valid method of popping up sidebar information. It's cross browser compatible, written to standards and doesn't require any javascripting. (There's even a click-only version - same deal). Have a peek!

flower background pop-Info - (A CSS Technique for Popping Information)

popInfopopInfo jack-in-the-box

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.

Normal Sidebar

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. popInfo css toy 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 ...

Read full story...

(Permalink)
Views: 27854 views
9 Comments · GuestBook
default pin-it button
Updated: 3-Feb-2008
Web View Count: 27854 viewsLast Web Update: 3-Feb-2008