Cross Browser Semi-Transparent DIV

I was recently asked to design a new website for a bikes company. They wanted to use a large background image with a semi-transparent (opaque) div box to contain each pages main content. My first thought was to use filters through CSS. Although filters lie outside the scope of both the CSS1 and CSS2 definitions, the mechanism through which they are called is part of CSS. More recently CSS3 has a new property in an attempt to unite browsers. These properties are shown below:

Internet Explorer              filter: alpha(opacity=50);
Mozilla                        -moz-opacity: 50%;
CSS3                           opacity: 0.5;

For compatibility it is recommended to use all three.

The problem with this is consistency. If a div is created with it's opacity set to 50% using the mentioned methods, different browsers produce different results. Mozilla browsers (rather annoyingly, correctly) apply this opacity to all child elements within the div. So any text, images or even scroll bars are also set to 50% opacity. This is true even if you try to apply an opacity of 100% to these child elements. This is because the 100% you apply to them is 100% of the 50% they currently have. Internet Explorer does not suffer from this and although more desirable, is not consistent with the CSS definition. A new solution needed to be found with the following requirements:

  • Works on both browsers (IE and Mozilla being the most common browsers visiting the site)
  • Does not suffer from the 'child inheritance' problem
  • Has no noticeable negative performance impact

The solution I came up with lay in the PNG image format. I wanted to use a 1x1px image of opacity 30% and tile it across the div as its background. This would give the same result at setting the opacity of the div but without using the CSS properties and having the child inheritance problem. However PNG has it's own issues with support in Internet Explorer which requires a work around supplied by Microsoft. So to set the background image of a div to a PNG file, the following can be used:

Mozilla            background-image: url(box_bg.png);
Internet Explorer  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='box_bg.png');

A final problem with the Microsoft fix in Internet Explorer is that if the standard (Mozilla) method is also included in a div, then the incorrectly rendered PNG image covers the fixed one. To get past this you can exploit Explorers lack of support for attribute selectors. This allows you to place the Explorer fix in the div (which Mozilla will ignore as it is an Explorer filter: attribute) and the Mozilla method in an attribute selector for it (which Explorer doesn't support).
The final div CSS is shown below:

.transbox {
    width:  300px;
    margin: 10px;
    border: 2px solid black;
    /* Mozilla will ignore this as is it a M$ filter */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale src='semitransparentpixel.png');
}
.transbox[class] {
    /* IE will ignore this as it doesnt support styles with [attributes]*/
    background-image: url(semitransparentpixel.png);
}

Unfortunately this is still far from a prefect solution. Should Internet Explorer support attribute selectors in the future, then we are back to the background cover up problem. We can only hope that Microsoft sorts out its PNG problems before this ... or, perhaps all browsers will finally unite in their interpretation of opacity in CSS3 and allow the designer to decide if child elements inherit their parents transparency. We can only hope.

- FIN -

About this entry

You’re currently reading “Cross Browser Semi-Transparent DIV,” an entry on ReloadSystems

Published:
07.20.07 / 3pm
Category:
CSS