Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
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:
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
Below is a short list of some of the reasons behind our decision to drop support for Internet Explorer 6:
- IE6 is old and antiquated
- IE6 is crappy compared to modern alternatives
- IE6 support costs web-developers frustration & time
- 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 much less secure against malware, spyware & viruses
- IE6 lacks new features like native tabbed browsing
- IE6 doesn't support transparent PNG graphic files
- IE6 doesn't support many CSS directives (e.g., :hover, :first-child & min/max-width)
- IE6 doesn't support web standards well
- IE6 work flows are slow
compared to modern browsers
Finding Directions in IE8
A good comparison of modern -vs- ancient work flows can be demonstrated by looking up directions to an address contained in an online email:
1) highlight the address in your email;
2) right-click and "copy";
3) open a new IE6 window;
4) find or type in a mapping website URL;
5) paste the address into the mapping site;
6) press [Enter] and wait for a response;
7) return to email to pick up where you left off. IE8 (modern):
1) highlight the address in your email;
2) Right-click and "Map with Live Search" As you can see, IE8 can dramatically speed up this work flow in this example, by eliminating 5 (or more) steps. Click for other new features in Internet Explorer 8
IE6 is one of The 25 Worst Tech Products of All Time.
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.
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
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 ...