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.
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:
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.
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.
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
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.
Related articles by Zemanta
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.