C2F Winter 2007 Web Theme

Tuesday, January 15th, 2008

C2F Winter Term 2007 Web Site Theme
see a sample in action

I'm way late in reporting on this C2F web site theme change. I made the switch from Holiday 2007 a few weeks ago before leaving to Brazil. This latest theme includes some significant enhancements. I made wide use of PNG transparency, a graphical feature all web designers would like to use en masse, but few venture to do so. I myself had been hesitating to use a significant amount of PNG graphics in my projects prior to this one. Basically, PNGs are a vast improvement over the GIF graphics format. Not only is it better in every conceivable way, but it is an open source solution, in comparison to the very closed and proprietary GIF option. The coolest feature of the PNG format is its support of the alpha channel, which allows varying levels of transparency across an image.

The reason that most people avoid heavy use of this file format is poor support by Microsoft Internet Explorer. This is the only browser that has ever had significant issues with the format. PNGs have been around for well over 10 years, and Microsoft has never bothered to support this brilliant technology. It's no surprise, as everyone with knowledge of the situation is well aware that Microsoft is 15 years behind the times in their browser technology. Resulting from their unfair monopolistic ownership of the market (their browser is included with Windows - and thus virtually every computer in the world), most people aren't aware of the browser's MANY problems, weaknesses and shortcomings. Because the overwhelming majority of people use what comes installed on their computer without researching other superior options, web designers are stuck in the stone age of coding and antiquated technologies in order to support Microsoft's inadequate software that is widely used. Interestingly enough, all other web browsers are free, and all of them - without exception - are vastly superior to Microsoft Internet Explorer in every measurable aspect, feature or experience. If you see the "Blue E" when you use the internet, it is time to change; you have the wrong browser! Download and install one of the following browsers, all of which are free and far superior to what you are currently using: Mozilla Firefox, Opera, or Apple Safari (for PC and Mac).

Now that the more important side topic of browser change and awareness has been covered, I'll describe what I was able to achieve in my latest web site theme. One of the effects I've long wanted to achieve in my designs is translucent window panes and boxes. It might sound ridiculous that such a thing is considered a challenge, but the reason has been explained. All major browsers aside from MSIE support every aspect of PNG transparency. To get the effect to work in IE remains the challenge. There are certain aspects, such as 2D tiling of transparent graphics, that is yet impossible to achieve in Internet Explorer. But something as basic as single color, consistent transparency is possible with several hacks and cheats for IE's sake.

I am sick and tired of waiting for IE to catch up with the browser pack. Therefore, I decided to do the bit of research necessary to find the slimmest possible and most successful IE hacks. Go here for the most complete and up-to-date information on PNG support. I will not try to replicate the immense work they've done. I simply regular their site and see how slowly the world is changing (thanks largely to Microsoft). Perhaps the best tool out there for optimizing your PNGs is a combination of 2 free tools: Irfanview and Ken Silverman's PNGOUT plugin for Irfanview. Using these tools, you can convert and compress your PNG files to the maximum extent possible. As far as making the graphic material to be converted to PNG, you can use just about any program out there. My favorite is Fireworks. It's the superior solution for making web graphics because all the objects you make can retain all their editable qualities (especially vectors) - non-destructive editing.

Sorry, but I'm not going to get into the details of how I hacked IE so it would support basic PNG transparency - that would be boring for all. I will mention the methods I used, however. Of course, the primary hack I used is Microsoft's proprietary css filter, which is essentially a crude Javascript-like morsel of code that corrects some of IE's misbehavior (not all, unfortunately). To hide this junky code from other browsers (they all ignore it anyway), I used yet another of Microsoft's hacks which allows you to embed any code you want in an HTML comment ("IE Conditional Comments") which only particular versions of IE can see and use. Realizing that I make use of a number of other IE-specific hacks for a variety of purposes, most unrelated to PNG support, I moved all of this trashy CSS into this file, so now the clean can remain separate from the unclean - as it should be.

The third, and most annoying workaround I had to contend with is the clickable link flaw. If you use a CSS background-image rule with a transparent PNG in combination with the aforementioned IE-specific filter hack, any links inside the container with the background will be unclickable! The reason is that the stupid filter hack actually creates an invisible, unwanted object that covers your layer/container, so the links are in fact not the topmost thing, and therefore, cannot be clicked (STUPID!). The fix I dreamed up for this is simple: create a dummy, empty div inside the container you wish to have the transparent PNG background. Apply the junky filter to this div, and make sure it has a z-index less than the other content you wish to be clickable (which means you have to give your content a z-index and position:relative or less likely position:absolute so the z-index actually does something). Position this empty div absolutely and give it a huge width and height (bigger than any content in your container will be. Make sure the container it is in has overflow:hidden in force so your div doesn't take over the world, and you will effectively have your transparent (translucent) background that no longer blocks out any links. Yes, it is a junky method because you are required to create yet another div that shouldn't have to exist... but it works. I've come to realize that, while I'm a total CSS and standards-compliant purist, if I want to do anything cool or make use of graphically interesting methods and technologies - and have the vast majority of the world actually SEE and EXPERIENCE it - I have to include some undesirable Internet Explorer hacks.

I could provide some working code examples here, but I currently don't get a lot of traffic and questions regarding CSS (or anything else for that matter). Not to mention that my 3 to 5 faithful readers would probably skip right past it in total boredom. There are a million sites out there with well-written articles on the subject. If, however, someone comes across this and is struggling with the same issue and wants more information, please let me know. I may be of some assistance. My goofy empty div link fix hack might be a little unique, as I didn't copy the solution from someone; it just came to me (I'm sure I'm not the first to use this type of hack, as it resembles the faux column hack and others that rely on huge backgrounds). But the rest has been done before a million times and is well-documented elsewhere.

So, without further ado, here is a link to a dummy layout demonstrating all these techniques and giving a better view at the new Winter 2007 theme in action. As always, best viewed in any browser except IE, but it should look presentable in IE6+, as that was the point of all these hacks!

Previous Posts About C2F Themes: