CSS transparency tricky IE6 fix

It’s not hard to implement a semi-transparent block by CSS in all modern browsers. The code is something like this:

.thisblock {
filter: alpha(opacity=65);
-moz-opacity: .65;
opacity: .65;
}

And in your HTML, you have something like

<div class=”thisblock”><img src=”someimage.jpg” />some text after the image</div>

Very eassy, right? It basically covers all browsers - IE7, Firefox, Mozilla, Chrome and even Opera. However, if you try IE6, it’s not working.  Here is one little trick for that… add either width or hight to that div class, then you are done. So the fix will be

.thisblock {
filter: alpha(opacity=65);
-moz-opacity: .65;
opacity: .65;
width: 50%;
}

width can be anything, number, percentage, except “auto” or “inherit”.

With the above trick said, if you really don’t want to define the width or height of a block, but have to implement the semi-transparency in IE6, use <p> instead. With <p>, you don’t have to worry about width or height, because not like <div> which span across the entire row,  <p> automatically wrap around the elements inside it, thus it got a specific width by itself.

Tags: CSS, trick, web development  |   Delicious    Stumbleupon    Digg