A demonstration of cross-browser transparent columns

A demonstration of how to implement cross-browser transparent columns. It's used by having combination a transparent div with the same height as it's parent and a div containing the content. Then we pull the overlay div to the left and set the content div to position: relative; to fix the z-index. Check the source or read the original article for more info.

Since IE6 lack support for absolutely positioned elements with both top and bottom (this is true for right and left as well) we have to compensate for this using proprietary CSS expressions. Voil!


Tested with and works in Firefox 2.x (Windows, Solaris & OSX), Safari 3 (Windows & OSX), Opera 9 (Windows), IE6 and IE7.

Quirks to have in mind

You must to set the width of the parent columns for this to work properly. Each column needs it's own ID and it's own IE6-rule for the expression: (). It also won't work in IE6 without javascript, which is a minor issue since it degrades gracefully.


Courtesy of Fredrik Wrnsberg. Thanks to SquidFingers for the background.

Released under a CC-Public Domain license.