Transparent PNG's and IE 6

IE 6 doesn't have native support for the Alpha channel that make PNG's transparent.  This can make PNG's look very ugly in IE6 when they are transparent.

Asking around the office today, I got a cool solution that uses IE's proprietary behavior css attribute to call a Compiled HTML document that applies filters to the PNG to behave correctly.

It's pretty easy to install:

How To Use

Follow these simple steps to add this to your page:

1. Copy and paste iepngfix.htc and blank.gif into your website folder.
2. Copy and paste this into your website's CSS or HTML:

   <style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

   That CSS selector must include the tags/elements on which you want PNG support -- basically, give it a comma-separated list of tags you use. It must also include the correct path to the .HTC relative to the HTML document location (not relative to the CSS document!). For instance, yours may look like this:

   <style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>

3. If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like so:

   var blankImg = '/images/blank.gif';

   Again the path is relative to the HTML file. Otherwise, you will see a "broken image" graphic!

Selecting the fastest selector for jQuery using Firebug Profile

Today I needed to select all the h3's within a div and set a margin-top property on all items in the returned set except the first.

I came up with a few ways to return the results I was looking for (here are some jQuery examples):

$("#div h3").slice(1);

$("#div h3:not(:first)");

$("#div h3:gt(0)");

I've been reading a lot about how your selection can be optimized based on how you structure your query. So I ran each query through Firebug Profile to see which selector query was the fastest. Load the page, click on the "Profile" button at the top, run your query in the console, click the "Profile" button again to stop the profile.  You'll get the time it took to execute that statement.  Here are the results for each:

$("#div h3").slice(1); 3.305ms

$("#div h3:not(:first)"); 0.705ms

$("#div h3:gt(0)"); 2.347ms

It's clear from my testing that the second query is 2-3 times faster then the rest for my page and my specific uses.  Your specific profile times may vary based on HTML structure and selector query. So it's always good practice to test the speed of your selector if there is more then one way to get your results so that you are using the most efficient selector for your situation. 

Hidden C# Feature: Using Alias Directive

You can create an alias to a long namespace or a type like so:

using Project = SolutionName.Data.Project;

Then you use the Alias in place of the namespace:

Project p = new Project();

I wish I would of known about this last summer, probably could of shaved a month off my project just from not having to type in the long namespaces to our data layer.

Related Links:

using Directive (C# Reference)
Hidden Features of C#