Give your users the ability to dock a toolbar in the screen

Hedger Wang has another great tutorial/demo. He’s created a dockable DHTML sidebar that allows the user to place it on any edge of the browser or leave it floating in the center of the screen.

I first thought about using this in navigation, but that may be a bit adventurous. It would be a great way to offer other site tools, such as your style-sheet changer, search bar, am I hot or not buttons, contact links, etc.

CSS, XHTML, JavaScript, ROR Cheat Sheets

Dave Child has created a library of cheat sheets that have been pinned to cube walls around the world. If you haven’t seen these before, takes some time to visit his site and print your own versions. Attached to my wall are:

Mulberry Technologies also has a set of cheat sheets for XML Syntax (.pdf) and XSL 1.0 and XPath (.pdf) .

Hedger Wang is God! – well a guru at least.

Hedger Wang responded to my desperate plea for help on the z-index issue with a simple test page on his blog with an ingenious iframe solution. How people imagine these solutions is simply beyond me. So, then I started going through his blog and was blown away by his tests and solutions. CSS, JS, AJAX, you name it, this is a goldmine on info.

Conflicting Z-Index in IE6

Internet Explorer 6 has an issue with positioned elements that use z-index. Here’s the trouble I just had with this:

I have a topnav consisting of an unordered list with a dropdown menu on one of the list elements. The dropdown is a nested unordered list with position:absolute and a z-index to sit on top of any page content below. Fairly simple so far…

However, in IE6, the menu is obscured by an h5, random images, and paragraphs on various pages. The z-index should make this list float on top of other elements, but it seems to be ineffective.

PPK summarized this problem on his post: Explorer z-index bug:

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headaches and a lot of misunderstanding of what z-index really does.PPK

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn’t mention Aleksandar’s simple solution. Give the parent a position:relative and z-index:1..

Now, of course it isn’t always that simple. There’s also the issue of subsequent objects that also have a z-index and what happens if their parent is also positioned with a z-index. Please take some time to visit Aleksandar’s web site if you are having this conflict.

IE7 and more fun

According to PPK’s web site, this has not been fixed in IE7 Beta2Preview. We’ll see how this works out. I’ve noticed some positioning bugs in IE7 myself. This is something to consider when considering the z-index happiness of Andy Clarke

More solutions

Hedger Wang has an ingenious solution to the conflict between z-index on elements and subsequent select elements. He uses an iframe with z-index-1 that sits under the targeted element. I’ve used this negative z-index on some of the subsequent elements and it is helping. Fixing all of the pages will be a long journey , but at least there is light at the end of the tunnel.

Yet another hack/update

I had to remove the negative z-index from the container as it was keeping a link with background image/text-indent, display:block, etc from having any hover activity. It acted as if it were under a layer. Other links in the container were fine. You’ve got to love IE6

Yet another hack/update 4-30-06

We were using an iframe with the src=”/”. Can you guess what happened? Oh my goodness. We were loading the home page inside every other page on IE. So here’s the tip we learned… don’t use a page url for your invisible iframe, use an spacer.gif or something benign instead. Better yet, get rid of the iframe if you find other solutions. Which is what we ended up doing. We’ve messed with this thing for so long we’ve lost track of what’s doing what.

Reblog this post [with Zemanta]

FLORWAX – Mobile 2.0?

I sat next to Adrian Cockcraft on the plane up to San Jose yesterday. He just finished the ETech conference in San Diego.

He told me about his concept of bringing the Web 2.0 infrastructure to mobile appliances with some consistency. FLORWAX uses flash with AJAX like behaviors built on the Ruby on Rails platform. It’s just an accronym at this point. Let’s see if there’s any traction for this approach.