blog

Sorry to bore everyone with yet another developery post, but this does affect you designer types as well. Plus, I think it’s cool so I am going to share.

If you look closely around the web you will rarely see tabs that overlap each other. Usually, each tab is in its own self-contained box. The reason for this is that if two tabs overlap then turning one of those to its activate state requires the swapping of multiple graphics. This makes using sprites much more difficult and less effective (and if you’re still using JavaScript for image rollovers, well, that gets even messier).

So, I am working on the UI for the tabs seen to the right. You’ll notice that not only do they overlap, but each has a drop shadow that covers all the tabs and only those tabs that are “underneath” it. It is literally like we have four tabbed sheets of paper here that we want to be able to stack in any order. In my opinion, this is a pretty silky graphic effect, check it out, the PG. 2 tabs is all the way on the bottom, followed by PG. 1, then PG. 3, with PG. 4 on top.

My solution is to use absolute positioning along with transparent PNGs. Yes, transparent PNGs mean bad news for IE 6, but the solution is otherwise super-easy to work.

Simply cut out each individual tab and keep its alpha-channel transparency by saving as a PNG. Then, absolutely position each tab in its correct place on the page

Now here is the trick. If the server generates the active tab, whichever tab appears last in the HTML code will be on top based on the natural stacking order (i.e. no need to fool with z-index).

If the client-side can alter the active tab, messing with z-index is really not that difficult. I haven’t tried it, but something like the following should work thanks to jQuery.

$(‘.tab’).click( function() { $(this).siblings().css(‘z-index’, 1).end().css(‘z-index’, 2); } );

Oh yeah, if you do need rollovers this method is totally compatible with your traditional CSS sprite.

Ok, to get a PNG showing up in IE 6 (without that horrid grey background) you need to specify a CSS filter.
This filter is essentially a Microsoft IE plugin that loads a PNG into the background of any HTML element, however
it will lack most properties of normal CSS background images.

This code will make <div id=”logo”></div> show our PNG logo in IE 6. However, in Firefox the <div> is empty.
That is why we need to use IE conditional comments. That is, specify one general
style and then if we are in IE 6 have a style to override it.

Now, our PNG show up properly in both Firefox and IE 6 (as well as other popular browsers–IE 7, Opera, Safari). It is that easy.

Suppose now that we to fix all PNG images on a page without necessarily knowing where they are or specifiying each one individually by id.
For this we will need JavaScript and for simplicity we will do our PNG fix with jQuery as it will let us easily grab every image
whose src attribute ends with .png ($(“img[src$='.png']“)).

Place this snippet of JavaScript in your and your PNG should be fixed in IE 6. Of course, do not forget to download a copy of jquery.js.