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!

Browsers

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.

Thanks

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

Released under a CC-Public Domain license.

A sidebar

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent at felis. Praesent vulputate, tortor vitae bibendum dignissim, risus enim congue lacus, tincidunt condimentum sem arcu eget dui. Nulla ligula. Etiam lobortis, dolor eget volutpat posuere, nisl metus fermentum velit, vitae egestas purus massa vestibulum dui. Donec eu ante. Suspendisse feugiat, ante ut pulvinar ultrices, nisi tellus lobortis felis, id dapibus neque lorem nec nisi. Aenean lorem lectus, consectetuer ac, ornare vel, eleifend tincidunt, nibh. Nullam auctor. Nulla facilisi. Suspendisse sed erat. Ut vitae sapien. Duis libero risus, ultrices eu, porttitor at, eleifend vitae, massa. Integer magna. Proin a diam. Curabitur congue.