Releasing CSS

Figure 14. PNG images with alpha transparency

The Graphic Interchange Format (GIF)allows only one level of transparency.

Either a color is transparent or it’s not in a GIF image. Having an image format

that provides multiple levels of opacity opens up a new way for web designers to

produce web sites.

Support for alpha transparency in modern browsers is almost commonplace.

Browsers with native support for PNGs include Netscape Navigator 6+, Opera,

Firefox, and Safari. However, it’s missing from Internet Explorer 6.

In the browsers that support PNGs with alpha transparency, a simple

img element

is all that’s needed to incorporate alpha transparency into a page design:

<img src="alpha.png" alt="alpha transparency!" />

To work around this, Aaron Boodman created a piece of JavaScript that uses

Microsoft’s proprietary

filter property to activate Internet Explorer 5.5–6

support for inline PNGs with alpha transparency, without interfering with the other

browsers that support PNGs natively.

Drew McLellan built off of Boodman’s work and modified the JavaScript used in

the solution to make the script work not only for inline images, but also

background images (see

http://allinthehead.com/retro/289/sleight-update-

alpha-png-backgrounds-in-ie

).

You can either write the code into a separate JavaScript file or download the code

from McLellan’s web site at

http://allinthehead.com/code/samples/bgsleight.js:

var bgsleight = function() {

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}

function fnLoadPngs() {

var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');

var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {

Releasing CSS 18

if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {

fnFixPng(obj);

obj.attachEvent("onpropertychange", fnPropertyChanged);

}

}

}

function fnPropertyChanged() {

if (window.event.propertyName == "style.backgroundImage") {

var el = window.event.srcElement;

if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {

var bg = el.currentStyle.backgroundImage;

var src = bg.substring(5,bg.length-2);

el.filters.item(0).src = src;

el.style.backgroundImage = "url(x.gif)";

}

}

}

function fnFixPng(obj) {

var bg = obj.currentStyle.backgroundImage;

var src = bg.substring(5,bg.length-2);

obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"

+ src + "', sizingMethod='scale')";

obj.style.backgroundImage = "url(x.gif)";

}

return {

init: function() {

if (navigator.platform == "Win32" &&

navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {

addLoadEvent(fnLoadPngs);

}

}

}

}();

Releasing CSS 19

bgsleight.init();

Attach the JavaScript file to the web page by placing the following code in

between the head elements:

<script src="/_assets/js/bgsleight.js" type="text/javascript"></script>

Be sure to upload a single-pixel transparent GIF (listed as x.gif in the script) to

the web server and update the location reference to the file location in the script.

How the Script Works

As a page is loaded, McLellan’s JavaScript is executed. The script goes through

the HTML markup looking for img elements that point to images with the png

extension, as well as looking for PNGs in the background of elements.

Once it finds such an img code, the script dynamically rewrites the HTML on the

fly. The first part of the revision is to replace the PNG image with a single-pixel

GIF that is transparent.

Next, the single-pixel GIF, the x.gif, is attached to the background. The PNG is

loaded into the IE-only filter property to trigger the alpha transparency. Thus,

the PNG is shown in the background behind the transparent GIF.

When you code the page, be sure to set the width and height of the PNG image in

the CSS with the width and height properties to ensure that the entire image is

visible.

Microsoft Box Model

Another problem in IE6 is with the browser’s box model. Microsoft’s box model is

triggered in IE6 in quirks mode and IE5.x when a block level element has both a

declared width and padding or borders.

The CSS specification states that the width property defines the width of the

content area of a box, and that any margin, border, or padding space should draw

outside of that space. For example, in the following bit of code, the width of the

element (as it is stated) is 500 pixels:

div#content {

width: 500px;

padding: 33px;

margin: 50px;

background-color: #666;

}

As seen in Figure 15, the box appears to be 566 pixels wide. The 66 “extra” pixels

are from the padding being added outside the 500 pixels, however, the width of the

content inside the box is still 500 pixels.

Releasing CSS 20