cssvault - inspiring creativity

I just stumbled upon Unit PNG Fix by Unit Interactive. It is one among the many JavaScript based PNG transparency solution for IE6, and is inspired by the SuperSleight solution. What’s good about it though is that it is fully DOM based and automatic. There is no need to assign any additional classes (such is the case with TwinHelix IE PNG Fix) or rename any files (refer to Dean Edwards IE7 fix).

The official website lists the following features:

• Very compact javascript: Under 1kb!
• Fixes some interactivity problems caused by IE’s filter attribute.
• Works on img objects and background-image attributes.
• Runs automatically. You don’t have to define classes or call functions.
• Allows for auto width and auto height elements.
• Super simple to deploy.

Impressed, I gave it a spin. I took one of my projects and replaced the existing TwinHelix PNG Fix code with Unit PNG Fix. It seems to work a charm in all areas except for one: elements with absolute positioning and / or z-index gets screwed up, as can be seen in the following screenshots:

Correct layout using TwinHelix PNG Fix:

This time using Unit PNG Fix:

Here’s the actual CSS code:

h1 a { background: url(images/logo.png) no-repeat; display: block; width: 256px; height: 128px; position: absolute; top: 15px; left: 472px; z-index: 99; }


Other than that, for “normal uses”, Unit is the easiest way to go. The project is only two weeks old, and I have high hopes that bugs like these will eventually be fixed to provide a truly plug and play IE7 PNG transparency solution.

On the same note, the PNG8 format may actually be preferable for low color, non-gradient alpha transparency requirements.

Share

I have been receiving a couple of inquiries on how to create do CSS forms so let me direct you to Jeff Howden’s two year old CSS-Only, Table-less Forms article. Yes you heard me right folks: two years old! Yet it still displays properly on the newest browsers, which only shows how resilient the code is.

By now you must be wondering about the “almost perfect” part in the title. This is simply because the CSS code does not validate. The culprit? Of course, it’s IE again, with the JavaScript-in-CSS expression() hack.

Oh, and if you have questions or suggestions for articles, you may reach me via dennison [at] cssvault dot com

Have fun!

Share

This technique uses CSS pseudo selectors to the drop cap effect without modifying the HTML code.

For the poor folks who use IE6, David Kaneka came up with a JavaScript (jQuery) based solution that we can use.

So go ahead and see how it’s done or check out the demo page.

Share

WebDesignerWall has come up with a trick that uses nothing but a little CSS and PNG to apply gradient effect onto plain HTML text. The trick involves overlaying a blank block element that contains a translucent PNG gradient on top of the regular text.

As can be seen in this demo page, it actually looks pretty good.

There are a few limitations to this, of course. One being that the gradient will have to use the same color as the text’s background. Second, the background will have to be a solid color.

Finally, it requires the PNG hack to work on IE6, which relies on JavaScript. So, if the viewer happens to have JavaScript turned off, be prepared to see some cross-browser uglyness:

All in all a novel idea, but I’m not so sure I want to risk the chance of loosing a visitor though an accidental flash of ugly design.

Share

Nothing can be more disappointing than discovering that all those hours you spent laboriously getting your website to display properly on Firefox and IE7 does not work on IE6. As developers we definitely need to have IE6 and IE7 running side by side on the same machine. That’s how I discovered Multiple IE.
(more…)

Share

404 Creative Studio has a short, sweet piece on how to emulate image loading with CSS. The only limitation is that you need a predefined width and height, and that the image loader should be centered in the background, which cannot be done easily unless it matches the size of the image being loaded.

Check out the demo page.

Share