Vectorthis » Instructional

IE6 .PNG Transparency Hacks

Derek — Sat, 07 Feb 2009 11:41:40 +0000

The .PNG (Portable Network Graphics, PNGs not GIFs) has been around for years. Over a decade actually. Mid 1990’s (95-96) discussions arose revolving around the replacement for the popular .GIF format for various reasons: the 256 colour limit, the Unisys and LZW patent enforcement, among others. As of 2004 .PNG has been recognized as an International Standard (ISO/IEC 15948:2003).

With the web2.0 boom and exponential increase in popularity with xhtml/css in 2006/2006 the .PNG has also been embraced by the web development community. The shortcoming. however: IE6. IE6’s final release was in the summer of 2001, years before .PNG was adopted as a standard, thus IE6 does not support 24bit. As of January 2009 an astonishing 18.5% of Internet surfers are still browsing with 8 year old IE6, which handcuff’s many web developers who are not allowed to drop support for such a percentage (still 1/5th of the market). The Solution: IE6 .PNG transparency hacks.

There are many IE6 .PNG fixes floating around the Internet, but the one I have found most effective is the .HTC method offered by Twin Helix: It requires only one line in your CSS file, and no changes to your website HTML. tags and background images are both supported. As of August 2008, v2.0 alpha 3 offers support for background tiling and positioning.

How to Get the .PNG Hack Working:

Open the .HTC file and look for the following line “IEPNGFix.blankImg”. This script applies all transparent .PNGs via a background property, so for tags, it makes use of a 1×1 transparent .GIF. To avoid getting IE’s red x, ensure this path points to a transparent .GIF. The path is relative to the .HTC file’s location.
Once updated, place the .HTC file in the root folder of your web site directory
In your CSS file, preferably an IE6 only stylesheet (see below) add the following: img, div { behavior: url(/path/to/iepngfix.htc) } amending the tag list to include everything you wish to have the filter applied to. See this tip for more details.
To make use of CSS properties including background-repeat and background-position you will need to add a javascript call to your html file:

Below are some of the ‘best practices‘ I have adopted when using this hack.

Make use of an IE6 Only stylesheet

I don’t recall the technical issues that arose, but IE7 did not play nicely with this script. Page loads became incredibly sluggish and the pc usage went haywire. The solution was simple: implement an IE6 only stylesheet. IE6 is the only browser that needs this script to support .PNG transparency, so keep your CSS files clear of any hiccups use the following code so it’s only active when someone browses your site with IE6:

Use the .PNG Hack Sparingly

This script runs a filter on every tag you assign to it via your stylesheet. As a result, if you use .PNGs frequently across a large variety of html elements, the number of elements to check and run the filter against will pile up dramatically. Some practices I’ve adopted for this are:

Use a .GIF when available – .GIFs are still incrdibly handy for simple, light weight images like bullets or underlines, or background tiles that don’t require transparency. The fewer elements you assign to the HTC file, the fewer times it will run.
In addition to using .GIFs, be more specific with your selectors – If you use a .PNG as a background image on 3
s, there’s no sense in checking against every single one, so identify it specifically in your css declaration: img.photo, #checkList li, .widgetTile { behavior: url(/path/to/iepngfix.htc) }

Do Not Repeat Horizontally

This is a stupid bug I’ve noticed.

While v2 of this script supports background tiling and background positioning, I have noticed serious drops in performance when trying to repeat tiles horizontally. While it doesn’t provide a solution for wanting a .PNG background tile for the element, a solution I’ve adopted is to identify the largest element that would make use of a certain .PNG tile, save it out at that size, then just let it overflow off smaller elements. For example:

I have a side column where I want all widgets to be wrapped in a semi-transparent box. I want my main column also to be wrapped with the same tile – I save out the .PNG to the width of the main column, then in my css declarations I assign the same background image with repeat-y on both classes. It’s the same theory as just using a 1×1 .PNG and tiling across both axes, just repeating only on the one and letting the extra just run off with the smaller elements.

Examples:

Below are links to test-development sites where I have implemented this fix in one form or another:

Grid Based Design: Creating the Grid

Derek — Sat, 20 Dec 2008 14:11:09 +0000

Over the last couple weeks I’ve gotten a few requests for design advice from a few friends regarding layout/structure and the common thing I noticed with each is that no strict margin/grid system was being implemented.

I wrote up an explanation illustrating the process I follow to get my structures in place, so I’ve decided to throw it up in the blog for anyone else who might stumble upon it.

Step 1: Defining the Parameters

Before I start working with any numbers I layout my initial canvas as a rough sketch – I often sketch mine right out on paper. I do this to define the type of architecture – liquid graphics or framed within a box – and to get a rough idea of how I want to control content, IE column numbers. These often vary from project to project.

Step2: Setting up the Canvas

In general, I’ve stopped supporting 800×600 designs, I optimize for 1024px so depending on the design style, I usually pick between 960px-1000px widths. I like to push my backgrounds to the 1280-1440 range, but I limit my content to something below 1024. If you’re required to work for an 800×600 audience, I remember 780 was my sweet spot.

For fluid/open concept designs, I often use larger margins, so I tend to set my content boundaries around 1000px. For framed designs, I’m going to have an extra margin on each side of the content boundary for the space between the content and the frame, so I often set my content boundary to 960, so once I’ve set the frame up, the whole thing is still under the 1024 mark.

Step 3: Setting the Margin/Grid Values

With web design, it’s a little tricky to work with an absolute grid (like graphing paper, it’s generally solid along the x-axis, but y gets tricky, especially when dealing with dynamic content) with different browser’s sizing interpretations, but I like to keep all my blocks of content/graphics separated by a consistent spacing value.

Again, depending on the type of architecture (open or framed) I’ll settle on something between 10px-30px.

Step 4: Setting up the Grid

With the design process I follow I usually end up establishing the first 3 steps as I’m brainstorming different interface ideas/concepts, so I’m usually hovering between step 3 and 4 by the time I finally make my way into Photoshop.

The key to setting up a solid grid is knowing how well you will be able to mix and match content block sizes. I like to define fairly thin grid sizes, so while I may only break my content into 3 or 4 columns, I want to be able to break each column into 2 or 3 pieces, so I could have a content column worth 50% of my design, and be able to break off 1/8th for a related photo and everything will still conform to the grid I’ve established. See my Vectorthis grid arrangement for an example, specifically, the time line.

On one page, you may want to break your content in half/quarters, but another you may want to break into thirds. A common thing I’ve started to run into is working with halves and thirds on the same page. In this example I’ve broken the top half into 1/2 & 2/4, and the bottom into thirds. As a result, I like to try and pick a number of grid bars that can be divisible by both 3 and 4, such as 12 or 24 – essentially, I try to work with increments of 12 unless it’s a special case where I know I won’t have to cater to both, IE I could use 18 grid bars for strictly thirds.

Step 5: The Equation

After I’ve defined my canvas size and functionality limitations of the content, I do some simple arithmetic to define my grid bar sizes. For the following example, I’m going to set up a grid for a content area of 960, trying to set up 18 grid bars (columns of thirds). Ideally I want a margin of something around 12px.

Take your column number, subtract 1, then multiply by your desired margin value. We want 18 bars, which means we’re only going to have 17 spaces, because the left/right bars will be flush with the edges of our 960 content boundary. We want each bar to be 12px apart so we will have consistent spacing across the canvas. Our first step will look like this: 17*12 = 204
Next, subtract that value from your total content area: 960 – 204 = 756
Next, divide that result by your column number: 756/18 = 42.
If you’re working with a framed design, add an extra margin space to each side of your content boundary to separate it from the edges of the frame, like so. If you’re working with an open concept design, you can skip this part since the only frame you’ll deal with is the browser window.

Now that you have a whole number, your grid bars will be 42px wide. If you end up with a decimal, you need to repeat the process trying different values for your margins / total grid numbers. If you tried 14px margins, you’d end up with a column width of 40.1111 and since you can’t work with fractions of a pixel, you won’t evenly take up the space.

Additional Thoughts

Sometimes it’s a little tricky to strictly stick to the grid lines – IE dynamic items like horizontal menus, login/status information – but as long as you try your hardest to keep content blocks (IE treat the menu as a solid block and don’t count the space between each link) conforming to the grid, it generally comes out pretty solid.

Also, a common thing you’ll run into is dividing content. Sometimes you may have content appearing in a box, or you have dividing lines between content blocks. A practice I’ve adopted from print/magazine design is to keep the content conforming to the grid and to apply any accents outside the grid to 1/2 the margin value. In this example you can see I had my accents bleed 50% into the margins. This allows content to stay aligned to each other regardless of any highlighting accent – See the top content block stay aligned with the Feature Product text underneath it.

Sometimes your content won’t allow you to make up all of your own column sizes. If you’re working with any kind of advertising you’re going to be forced to work with some fixed column sizes. In those cases, what I do is I’ll establish my advertising columns, then I’ll isolate the content columns as my boundaries and apply the same process. You can see with Hockey.com I framed off two side columns for advertising/widgets then applied my process to the available space left over.

Edit ( Jul 27 2010 )

This was the process I followed for a long time. About a month later I came across The Gridmaker. I have hesitated from taking the post down because there’s still useful info present on why I use grids and how, not just how I create the bars.