Quick Tip - How to Make Cross Browser CSS Divisions Transparent
There are several interesting tutorials out there for making CSS divisions Transparent, however most of the ones I’ve seen omit valuable information to make it work in all browsers. Lets take a look.
First we need an HTML file.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
</head><body>
<div align=”left” style=”top:100px; left:100px; right:100px; width:300px; height:300px; background-color:blue; position:absolute;” >
</div>
<div align=”left” style=”top:150px; left:150px; right:100px; width:600px; height:600px; position:absolute; background-color:#FF9900;”>
</div>
</body>
</html>
Here we have two overlapping CSS divisions (or boxes). I placed the CSS in line so that we can focus on the transparent code. Here’s the CSS. Place it in the <Head> tags.
<style type=”text/css”>
<!–
body {
background-color:#FFFFFF;
margin:0px;
padding:0px;
}
.Div_Class {
filter:alpha(opacity=50);
opacity:.50;
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
–>
</style>
All we are doing to the body is setting our margins to zero so that we can specify exact positions for our divisions, and setting the background color to white.
For the Division class we have a gobbly goop of transparency information. This is because no one browser seems to implement transparency the same. The first line is for IE7, and some later builds of IE6. ( Although I have found it as touch and go with IE6. Transparency in IE6 may be a side effect of another program of plugin. ) The second line is for Apple Safari browser, and some versions of Mozilla and Firefox. The third line of the Div_Class class is a Mozilla/Firefox specific implementation. The final line is for the KDE khtml component mostly found in Linux and mobles. You must have ALL of these in your class for your divisions to render properly in the broadest array of browsers as possible.
Now all we need to do is apply the Div_Class class to one of our divisions. How about we apply it to our orange division. It should look like this when we’re finished:
<div class=”Div_Class” align=”left” style=”top:150px; left:150px; right:100px; width:600px; height:600px; position:absolute; background-color:#FF9900;”>
</div>
Ok, your done! Save it to a file and test it out. This is what you should see if your browser is supported:
The biggest problem with using this code is that the browser support is glitchy at best, however it is getting better. It really depends on who your audience is in the end as to whether you want to implement this technique or not. Thanks for reading.
One Response to “Quick Tip - How to Make Cross Browser CSS Divisions Transparent”
Leave a Reply
May 20th, 2008 at 4:08 pm
[...] however most of the ones I??ve seen omit valuable information to make it work in all browsers …http://whitesandsdigital.com/wordpress/2008/04/08/quick-tip-how-to-make-cross-browser-css-divisions-…UCLA General Catalog 2007-08: ACADEMIC CREDITCredit for upper division tutorial courses numbered 195 [...]