Cross-browser transparent columns
Transparency is an effect that, unfortunately, haven’t gotten much use during the web’s history. One of the biggest reason for this is the lack of support for PNGs with alpha channels in IE6. This is starting to change with IE7 and Firefox gaining more and more ground on Windows systems.
As most web developers are aware o it’s possible to use PNGs with alpha channels, but this is filled with lots of problems and doesn’t work very well when you place content on top of them.
There is a way to make content transparent, using the opacity tag and a proprietary opacity filter in IE-based browsers. The problem with this CSS-property is that all children to the transparent element will be transparent as well, which often isn’t the desired effect.
Knowing all this, how do we create transparent columns that can work in all browsers? What if we could use the opacity property but still have the content opaque?
This is possible using some clever use of CSS-positioning. What we’ll be doing is having a parent element that contains two children. One transparent background that fills the entire width and height of the parent, and one child that contains the content. This way we can have a transparent background while the content remains opaque.
Let’s get working
The basic markup we will be using is as follows:
<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>
</div>
First we want to set the container to position: relative; float: left; this allows us to use relative absolute positioning and makes the parent to contain all children if they are floated.
#column-1 {
position: relative;
float: left;
width: 500px; /* remember to set a width */
}
Not let’s take care of the transparency on the “overlay”-div.
.overlay{
position: absolute;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* older Gecko-based browsers */
filter:alpha(opacity=65); /* For IE6&7 */
}
Ok. Now let’s style the content. It’s important to set a fixed width.
#column-1 .content {
width: 460px;
padding: 20px;
}
Ok, almost done. As you may have noticed (if you’re following me, that is) the text is placed under the transparent overlay div. To fix this, we set the content to position: relative;
.content {
position: relative;
}
Ok, now it works in all browsers except for IE6. Let’s fix that. Enter the following CSS expression:
/* Lets use the * html hack so only IE6 reads the rule */
* html #column-1 .overlay {
height: expression(document.getElementById("column-1").offsetHeight);
}
If you plan on using it on a live site, you may want to use conditional comments instead of the star html hack. But for this example it will suffice.
Drawbacks
It’s also noteworthy that it won’t work in IE6 if javascript is disabled, but it degrades gracefully. Given the last survey of IE6 I saw which was about 32% and the (roughly) 10% that surf the web without Javascript, only 3% of your visitors will even notice this, which I find totally acceptable.
Another downside is that each column needs it’s own id and it’s own CSS rule for IE6. I can live with that though.
Conclusion
And there you have it! Here’s a working example. Cross-browser transparent columns. This is the same technique as I use on this site. Floats work too - which makes it possible to create multi-column transparent-column layouts.
Download the source-file transparent-columns.zip.
Translations
Have something to say? Leave a response →
[…] Bits & Pixels has a clever way of achieving transparent columns that works in all major browsers (including IE 6). […]
[…] Cross-browser transparent columns (tags: css) […]
Hey.. I just wanna pop up and say hi! I think ur stuff is awesome. I wish I can learn from you! I’m still very bad at integrating designs into wordpress.. thanks a lot!
[…] Enlace: Cross-Browser Transparent Columns […]
thanks for this big tip, and for the pingback about the tranlation…
Great example mate, really great example.
[…] Enlaces: | Demo | Vía | Autor original […]
Very nice solution! Going to use that tomorrow in one of my projects.
PNGs tend to break the anchors and the rendering can be pretty slow for large backgrounds.
Very good tip! It could be handy some day.
[…] Cross-browser transparent columnsA 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. […]
I’m not sure why you’d want to use a technique that relies on an expression for IE6, which as you say won’t work if js is off, when you can use alpha transparent PNG background-images and use the AlphaImageLoader filter for IE6 which will still work whether js is on or not.
Isn’t sitting a div over the top of another div rather an awkward way of going about this? I had a go at this in May last year, creating cross browser background tranparency with CSS using transparent .pngs for modern browsers, including IE7, and the filter expression for IE6.
Have a look and see what you think.
Because from what I’ve experienced transparent PNGs doesn’t play very well with IE6. They give you horrible render times and often break anchors on top of them and makes it impossible to select the text on top of them.
IE expressions degrade gracefully and it will only occur for a very small minority (~1% judging from my visitor stats).
I just found it to be the best solution.
@Phil: I like your solution of using different opacity values for IE and a transparent image for browsers that can handle them. Neat.
If you’re applying the fixes correctly you don’t get ‘horrible render lines’ and usually all that’s required to fix the anchor problem is add position: relative to the element. CSS expressions for IE are also very resource intensive.
[…] Оригинал: Cross-browser transparent columns […]
What a smart technique. I use transparency for my blog (http://53m1.com) too. But since I use png instead of this, I had to draw up a special css for ie6. I love your website design by the why.
This is quite a useful tip for me. Thank you. I will definitely use it for my future website designs.
[…] Bits & Pixels – Blog Archive – Cross-browser transparent columns (tags: css png layout) […]
Hey
Could you explain how you do the cool effect on your logo?
[…] Bits & Pixels – Blog Archive – Cross-browser transparent columns […]
nice…havent test it yet but nice solution
Just tested in on Linux. It works great under Opera and firefox. Under Konqueror and IE4Linux (which didn’t suprise) the transparent background is black.
still nice work - thx
[…] Images Create Resizing Thumbnails Using Overflow Property 10 best CSS hacks Pure Css Icon Sketcher Cross-browser transparent columns Resizeable Images (without losing quality!) Adding Rounded Corners to Images Using CSS CSS Fixed […]
Palmiak what version if IE is IE4Linux? I suspect that Microsoft’s proprietary filters that deal with the background opacity doesn’t play will with a linux version of IE.
@Magnus: are you referring to the smooth fade or the colour stains? Sure, I could write a tutorial on that. It’s actually quite easy.
Good tip. Thanks!
[…] Bits & Pixels – Blog Archive – Cross-browser transparent columns - Transparency is an effect that, unfortunately, haven’t gotten much use during the web’s history. One of the biggest reason for this is the lack of support for PNGs with alpha channels in IE6. This is starting to change with IE7 and Firefox gaining mor […]
ie4linux is IE6. And your’re the opacity just doesn’t work. I think the bigger challenge is Konqueror.
I guess -kthml-opacity would solve that. Haven’t tested it in Konqueror yet, I will when I get access to it.
[…] Bits & Pixels – Blog Archive – Cross-browser transparent columns […]
If only i had found this tutorial 2 months ago. I recently finished designing a site where I focused on css transparency as well as pngs. I used a very similar technique that I muscled my way through. Your method is a bit more refined then I managed. I completely missed the “bottom: 0;” idea (trust me I’m kicking myself) but I ended up using some nice javascript to match those 2 div heights to a third. The client is still finishing up the content so I may yet clean up my version. Here is the site (using lorem ipsum content) on my testing page: http://www.fancymedia.com/clients/bobbywood/
[…] The Bits&Pixels blog demonstrates this effect […]
> Another downside is that each column needs
> it’s own id and it’s own CSS rule for IE6.
I think this can be easily overcome - say, if you use class (eg, column) instead of id for the parent container. Then we can have only one CSS rule that deals with overlay’s height:
* html .column .overlay {
height: expression(this.parentNode.offsetHeight + ‘px’);
}
Yes, and for the old Konqueror you will need to add -khtml-opacity into CSS.
Hi Fredrik!
First, I want to say thanks for releasing your work and putting this great tutorial out for everyone to use. It came just in time for when I began building my wedding website.
Your technique worked great and all items displayed properly locally in Firefox and IE7. Unfortunately, when I used the technique on some static pages in Wordpress I set up for the wedding site, the transparent overlay layers won’t stretch down any longer in IE.
You can take a look here: http://granola-joe.com/wedding/
Any help is greatly appreciated. Unfortunately, I think most of the visitors to our site are going to be older and using IE
Check out this screenshot http://flickr.com/photos/tonetheman/2392605373/ of your example page on IE5.
It works! good stuff
[…] Cross-browser transparent columns Оставить комментарий Comment RSS Назад: Три подхода в […]
[…] Cross-browser transparent columns- How to create transparent columns that can work in all browsers. By using the opacity property and still having the content opaque. Floats work too - which makes it possible to create multi-column transparent-column layouts. […]
[…] Cross-browser straight columns- How to create straight columns that crapper impact in every browsers. By using the incomprehensibility concept and ease having the noesis opaque. Floats impact likewise - which makes it doable to create multi-column transparent-column layouts. […]
[…] Cross-browser transparent columns how do we create transparent columns that can work in all browsers? (tags: css transparency webdesign tutorial png) […]
[…] Bits & PixelsBlog ArchiveCrossbrowser transparent columns […]
[…] Barras de búsqueda con la técnica de reemplazo de imágenes. Imágenes transparentes en varios navegadores. Columnas transparentes para varios navegadores […]
Thank you sooo much Fredrik. I’ve been trawling the web searching on how to get the IE expression to work. Using your example I’ve now got a handle on it. Woohoo.
Great technique, shame though, I can’t seem to get it to work when using
position: relative;
instead of absolute!
This comment:
I think this can be easily overcome - say, if you use class (eg, column) instead of id for the parent container. Then we can have only one CSS rule that deals with overlay’s height:
* html .column .overlay {
height: expression(this.parentNode.offsetHeight + ‘px’);
}
Made it work for me…Great Stuff…
Hi there! I’m improoving my website a lot since I abandoned it for a long time. I’ve tried this and for the most usual browsers in my country, it works fine. But I was thinking, what if the columns have a rounded corner transparent background??
Karin T, it’s possible! I do it on this site by combining this technique with transparent PNGs and then using the regular IE hacks to make PNG transparency work.
[…] Source […]
[…] they’re pretty ‘hackish’. If you’re really interested in using this method, Bits & Pixels explains how it can be done. Share This […]
The coding above is nice, but how can I use an image and still keep it opaque? This is slowly driving two of us mad!
[…] Cross Browser Transparent Columns - How to create transparent columns that work in all browsers using the opacity property and keeping the content opaque. […]
Is great, finally someone explains how to achieve transparency without affecting the content.
I would like to show you these examples that I follow his instructions.
http://gemablog-.blogspot.com/2008/09/transparecias.html
Thanks for everything!
Hi dude, thanks for your tutorial, helps me alot.
thxn
[…] . Cross-browser transparent columns-这个教程教你如何创建一个兼容各大浏览器的透明栏. […]
Saved me SO much time, this is such a great tutorial and i still cant believe how much IE6 and 7 is holding back the internet!