CSS Transparency in IE 7 and 8

headmaster @ 4:47 am


CSS logoThis is part two of a series in CSS Transparency. If you need to apply transparency to Mozilla Firefox and Google Chrome see part 1.

In order to have CSS transparency in IE8 and prior versions we need to employ a visual filter. For this situation we will use the Alpha Filter.

Separate Style Sheet for IE

The first thing to do is create an IE only style sheet if you don’t have one already. We don’t want our IE styles overriding any existing styles. We will link the style sheet using IE Conditional Comments.

IE Conditional Comments

IE conditional comments are explained in another post. For now we simply deal with the code.

We need to add a conditional IE comment in the head of the document in order to load the IE style sheet.

    <!--[if IE 8 | lt IE 8]>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
    <![endif]-->

A quick translation in layman terms:

If the browser is IE8 of less than IE8 [if IE 8 | lt IE 8].

Link the following style sheet:
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">.

The IE Only Style Sheet

The following code goes in you IE only style sheet:

2
3
4
5
6
7
.transparent-background {
   width: 80%;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter:alpha(opacity=50);
   background: Red;
}

Apply Layout to the CSS Object

The following is quoted directly from the MS page that documents the Alpha filter.

“The object that the filter is applied to must have layout before the filter effect displays. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.”

This part is actually pretty important when it comes to dealing with IE versions prior to IE8:
If you don’t give the object layout, (that is apply dimensional or positional attributes,) the Alpha filter will not work. You will not see the transparency.





Ajax CSS CSS gradients CSS rounded corners CSS Style Sheets CSS Transparency error Failed Evaluations footer header image gallery JavaScript javaScript JavaScript Errors jQuery jquery Lightbox light box links open source PHP PHP PHP scripts Pretty Photo prettyPhoto Programming Languages Script Evaluations Search Engine Optimization StatusNet StatusNet themes templates themes Useful CSS Code Useful WordPress Code Web Applications Web Design Web Development Webmaster Toolbelt WordPress wordpress Word Press WordPress 3.3.2 word press links WordPress Plugins wordpress theme
  • Digital Goodies