I just finished uploading the new design I made for seening.org. The design incorporated a lot of alpha-blending and a simple theming system. The best way I I thought of doing this was the use of PNG images instead of making a lot of GIF/JPEG images to create the same effect which would have a significant effect on development and loading time.

PNG (Portable Network Graphics) supports up to 48-bit color or 16-bit grayscale and typically compresses about 5% to 25% better than GIF files. Which may then very well suited for use in websites. The only problem is not all browsers support them, i.e. Internet Explorer 6 and below. Thankfully there is a way to get around this problem.

First, we make a separate style sheet for the IE6 and former browsers, since most of the new browsers fully support PNG images. The reason behind using a separate style sheet is because the style sheet we will use for the IE6 and below browsers aren't standard and will not validate. In order to validate XHTML and CSS we do the following:

Note this line if lte IE 6 in the example above, lte (less than or equal to) IE Internet Explorer 6. This stylesheet will only be used by the said browsers. Inside the style sheet itself we put the following code.

Again a few things to notice is the sizingMethod parameter. You can use scale to stretch the PNG graphic or crop to just use the actual dimensions of the graphic. Also in some instances you will need to specify the width and height of #element-id for it to work on IE6 and below.

Now here is the code we put in on our normal style sheet. Note the html>body at the start of the line. It's just a rule so that this line will be ignored by IE6 and below, though IE7 recognizes it.

One last thing to remember when doing this, links sometimes wont work on IE6 if placed inside #element-id. In order to get around this you need to put in inside a wrapper like a <div> tag and use the z-index and position attributes on it like so:

Just put your text and/or links inside the <div> wrapper within your #element-id element. Another thing to note that this work-around will not work if #element-id has the position:absolute attribute set. A way to get around this is to just float #element-id and use margins.

So to wrap everything up your HTML code will look something like this: