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.
Microsoft is teasing their release of Vista on the blog today; glossing over another shift in release dates. The release of IE7 has been pushed back already. Will this mean a further delay for IE7?
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
Icon Buffet has begun releasing free sets of icons to the masses. It’s these same masses, you and I, that have the power to distribute these little bundles of goodness. You see, each person is assigned a set of icons, I have the Shanghai set. You then trade these sets with your buddies.
So, if you really want another set, for instance the Marseilles Cafe set, you arrange to share your icons with your Marseilles laden buddy. That being said. If anyone has the Marseilles Cafe or Taipei Plastic Primates and would like to trade, leave a comment. Or, if anyone needs the Shanghai set, do the same.
I now have the following sets available for trade:
- Shanghai Tech
- Maseilles Cafe
- Oslo Atmosphere
- Durango Research
HTML & XHTML: The Definitive Guide, an essential resource book for web programmers. Continue Reading Book Review: HTML and XHTML: The Definitive Guide
There are books you read that change your way of thinking (Designing with Web Standards), books your read for ideas (Usability: The Site Speaks for Itself), and books you keep within arm’s reach at all times. This book, HTML and XHTML: The Definitive Guide, is one that you should always keep on your desk.
I’m saying this from experience. I’m a self-taught web programmer and have read over well over a dozen programming books during the past few years. This is the book that traveled with me from job to job. It’s where I go to check on the proper use of tags and attributes. It’s a well laid-out reference book that is actually interesting to read.
Who should get this book