Global CSS Reset

Different web browsers having their own defaults defined for most of the CSS properties and thus pose a problem in cross browser compliancy of front-ends. In order to address this, you should use CSS resets which brings the browser defaults to a same value across browsers. Various CSS resets are available in the web world, among which, Eric Meyer’s Reset Reloaded, YUI Reset CSS, Siolon’s global reset, Shaun Inman’s Global Reset & Tantek’s CSS reset  are notable. Personally I use Eric’s Reset Reloaded because it neutralizes virtually every default CSS rule of browser.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

body {
   line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}

del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Easy Selectors

These are the valid CSS selectors to address a particular browser or browser version. Most of the time, this technique is used for Internet Explorer only, although we can use it with every other browser. Below is the usage of selectors for addressing different browsers.

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Opera versions 9 and below

html:first-child {}

Google Chrome

body:nth-of-type(1) p {
   color: #333333;
}

Apple Safari

html:lang(en)>body  .classname {}

IE Conditional Comments

This technique is used to address some CSS for Internet Explorer only and make other browsers to simply avoid it or report it as comment. It works by putting up your code in comment style IE Conditional tags.

<!--[if IE ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Again we can use different sytax to address a particular browser versions like

<!--[if IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

<!--[if lt IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

You can read more about version targeting IE at quirksmode.org

Transparent PNGs

Although all the modern browsers support transparency for PNGs, yet again Internet Explorer 6 has a problem with it. IE6 displays a white patch beneath the PNG image. There are lot of scripts / techniques / solutions available to tackle this problem. One of the solution is to use HTC script with your page. Many other plugins and scripts are available to tackle this problem. jQuery pngFix, jQuery iepngfix are used alongwith jQuery. I personally use DD_belatedPNG.

According to its author

This is a Javascript library that sandwiches PNG image support into IE6 without much fuss

It has support for PNGs in background or in SRC of an <img/> element. It also fixes background-position and background-repeat properties of CSS, which creates a problem with other scripts used. It uses Microsoft’s buddy, VML to fix the issues.

Here is its usage

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');

/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
</script>
<![endif]-->

Fixing IE Box Model Bug

This is perhaps the most common and frustrating bug in IE 6 and below. It is caused due to IEs different approach in calculating the total size of a box. Let us say you write

.box {
   width:100px;
   padding:10px;
   border:2px solid #CCC;
}

According to W3C specifications, the total width of the box should be 124px, which all the modern browsers follow, while as IE calculates it as 100px only.

This deviation from the specs can cause lot of layout problems. IE 6 can actually get it right if you are in standards-compliant mode. There are various workarounds for this problem. Some of them are:

Box-in-a-Box

According to this technique, we simply use extra markup to fix the issue. Instead of using the padding on the main element, we insert another element inside it and use padding on it. Like

<div class=”box”>
  <div class=”box-inner”>
    Testing for box model hack
  </div>
</div>

In this case our markup will be

.box { width:100px;}
.box-inner {padding:10px;}

Simplified Box Model Hack (SBMH)

It uses the CSS parsing  bug of Internet Explorer to address the issue. This was first detailed by Andrew Clover

The structure for this hack is

.box {
   padding:20px;
   width: 100px;
   \width: 140px;
   w\idth: 100px;
}

The first line “width: 100px;” is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property “\width: 140px;” is for IE 5 and 6/quirks mode. The final line “w\idth: 100px;” will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px.

box-sizing

The newly introduced CSS3 box-sizing property allows you to choose which box-model your browser should use. The W3C box model is called `content-box` and the Internet Explorer box model is called `border-box`.

This can make it easier to control the size of elements and to make sizes behave the same across different browsers.

.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. Modern browsers will adopt the IE’s buggy box-model by setting this property.

Hover State

All the modern browsers support :hover pseudo-class for about any element, but IE 6 has the support for hover pseudo class on <a> element only (you need to set the href attribute for <a> element to get this working in IE6). To fix this issue with IE6, you need a proprietary fix for this.

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.

Download the script file and add this line in your CSS file, and you are done.

body { behavior: url("csshover3.htc"); }

Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

Double Margin Bug

Most of the people working with Web will be familiar with IE’s double margin bug. The bugs arises when you float an element to one side and apply some margin on that side. Without any reason, it simply doubles that margin.

For example, if we do this,

.box {
   float: right;
   margin-right: 10px;
}

IE6 will double the margin (most of the times) to 20px without any reason. But this bug can be easily overruled by changing the display property of the floated element from block to inline. So the CSS will be

.box {
   float: right;
   margin-right: 10px;
   display: inline;
}

Stepdown problem in IE6

When you float elements of a fixed width, they will align themselves horizontally to fit the width of the parent element. At least, that’s how it works in most browsers. In IE6, the floated items will not be displayed in a straight line, but rather will appear to stepdown in bizarre, staircase-like fashion. This can be fixed by applying display: inline; property to floated elements.

Previous Article CSS Best Practices

Avoid in-line css

Use of inline styles hinders the purpose of CSS and should not be used in a live site.

Test your code in A-Grade browser

Test your code in an advanced browser before checking it in a broken browser. Building the site on a broken browser results in your code relying on the rendering of that browser and breaking on standards-complaint browser.Instead start from perfection and then hack for the less able browsers.

Minimize and cleanup your code

Use as little CSS as possible, remove styles and parts of styles not being used or that were experimented with in the design process. You can even use some compressors to compress the code by removing unwanted white space and line breaks.

Combine Selectors

Use inheritance to minimize your code as much as possible, like this.

Instead of writing

h1 {
  font-family:Arial, sans-serif;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  color:#DE43A2;
}

h1 .title {
  font-family:Arial, sans-serif;
  font-weight:bold;
  font-style:normal;
  color:#CCC;
}

We can write

h1 {
  font-family:Arial, sans-serif;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  color:#DE43A2;
}

h1 .title {
  color:#CCC;
}

Use generic font families

While assigning fonts to the font-family cssproperty, always follow your fonts by a generic font family of that type like serif, sans-serif etc This will make any font available from that family substitute to the font, mentioned by you in the style and not available in the client computer.

Target your stylesheet

While linking your stylesheet in your document, specify the media in which to be used like print, screen, projection etc

<link rel="stylesheet" src="style.css" media="screen" />

Name your styles properly

Never name your styles on the basis of their properties or the appearance they are going to make, like arialblue5, redbox etc. Instead name the styles in terms of usage like sub-head, sidebar-box etc.  One of the most important benefits of CSS is being able to change the look without having to change the HTML.

Use functional names for your classes, avoid words that describe how they look.

Sometimes back, we used the favourite slicing technique to break down a larger image into smaller slices (parts) so as to make pages load faster, but all this technique was only fooling our eyes as the page looked like loading faster, while in reality it was not. Each of those images was fed up as a separate request to the server and would increase the time of loading actually.

According to Yahoo UI blog, the resultant sprite created by joining smaller images is always smaller in size than the combined contributed parts. It is because we have to use a single color table for the sprite instead of individual color tables for the contributed ones. Another advantage of using sprites is that this way we save the overhead required by the images.

Enough Writing, Let’s make a try

With the basic concept and theory behind CSS Sprites, it is time to build actual CSS that makes it run. Here we will make a try to replicate Yahoo’s sidebar.

As can be seen from the picture Yahoo’s sidebar contains around 19 links with their corresponding icons, but if you will notice, it has a single source image from behind. Infact Yahoo uses two CSS Sprites on their home page to increase their performance. As stated by the ex-Chief Performance Guru of Yahoo, Steve Souders on Yahoo’s performance blog that the number of HTTP requests is directly related to the loading time of the page, so lesser the HTTP requests means the faster image loading.

Coming to the point, let me tell you that I used the same image from Yahoo to achieve our effect more precisely.

As usual, the code starts with a browser reset. So did a browser reset with the Eric Meyer’s Browser Reset to neutralize and bring uniformity in the elements across different web browsers.
To establish a Yahoo like block level look, let us create some div containers and do a bit of styling to them.

<div id="menu-holder">
<div id="menu-holder-inner">
</div>
</div><!--/#menu-holder-->

Then I did a bit of styling for the divs to make a Yahoo like look.

/*------------------------------------------
STYLING FOR DIV ELEMENTS
------------------------------------------*/
div {}

/* Holder for our menu */
#menu-holder {
width:148px;
border:#B0BDC6 1px solid;
margin:50px auto;
background:url(../picx/grd-4px_1.1.gif) repeat-x;
}
#menu-holder-inner {
border:#FFFFFF solid 1px;
border-top:0;
border-bottom:0;
}

The code above indicates some background and border attributes that were used to style our divs. Moving forward, let us now create the menu items to be used in our menu.

<ul id="left-menu">
<li style="background-position:-396px -115px;">
<a href="" title="" class="menu-items-a" >Answers</a>
</li>
<li style="background-position:-396px -436px;">
<a href="" title="" class="menu-items-a">Autos</a>
</li>
……
……
</ul>


/*------------------------------------------
STYLING FOR UL ELEMENTS
------------------------------------------*/
ul {}

#left-menu {
list-style:none;
margin:0;
}

li {}
#left-menu li {
padding:0 0 0 0px;
background:url(../picx/trough_1.6.gif) no-repeat;
line-height:1.7em;
}

/*------------------------------------------
STYLING FOR A ELEMENTS
------------------------------------------*/
a {}
.menu-items-a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
color:#014289;
text-decoration:none;
font-weight:bold;
display:block;
padding:0 0 0 30px;
}

.menu-items-a:hover {
text-decoration:underline;
}

As you can notice from the above snippet, I have included a CSS attribute list-style:none; to override the default icon style for the ul. I have included the default background for all the li’s which they inherit from the default style #left-menu li .As you can see, I have written some inline CSS with each li just to change the position of the background image so as to display the desired icon only with the link. The inline CSS here is just to save time and you can replace it with the ids for the li’s or unique classes.

This menu example is just a simple example that demonstrates the power and simplicity of CSS sprites and just exposes a small functionality or application of the same. You can create more parts of your page using the technique.

Use a browser reset

One of the most common mistakes that designers fall victim to when it comes to CSS is not resetting their browser defaults. This leads to inconsistencies in the appearance of your desing across different browsers. So before doing anything else, when coding a website, you should reset the styling. You can use a simple reset with the universal selector like this

* { margin:0;padding:0;}

But using the universal selector is sometimes a bad idea as it is very heavy on the rendering agent to apply rules to every single element in the document.

One of the most popular browser resets is of CSS Reset by Eric Meyer. As Meyer says, “the styles should list all the actual elements to be reset and exactly how they should be reset.”

Another Browser Reset Library is Yahoo! UI Library: Reset CSS. It removes and neutralizes the default styling of html elements providing a foundation upon which you can explicity declare your extentions.

Another very useful CSS reset is CSS Global Styles Reset by Kyle Neath. A simple CSS Reset with some additional classes for better debugging.

Size text without using pixels

Web Designing best principles is to enable a site to withstand a user enlarging text and setting absolute text sizes is not a good practice. Instead we can size our text relative to the browser. Standard browser font size is 1em which is equal to 16px. A little web designer trick works around the issue and resets the font sizes for the entire site so that 1em is equal to 10 px.

body { font-size:62.5%; }

Simply throwing the font-size to 62.5% for the entire site does the trick. Now you can use em instead of pixels.

Organise your CSS Code

Organising your CSS code helps you with future maintainability of your site. You should make independent style sheets for different purposes and then linke them in your master stylesheet. Like you should maintain your typographic styles and structure selectors independently in different stylesheets and then link them together in your master stylesheet.

@import url("reset.css")
@import url("structure.css")
@import url("typography.css")


Make your code easy to read

While scanning through CSS, I came across a very nicely separated CSS coded probably by Rundle. It looked something like this:

h1 {}
h1#title { font-size:2em; }

div {}
div#error { color:#eee; }

This technique is very useful if you’re sharing code or working on a large site where you are using the same div tag in multiple places.

Document your code

This might be common sense to some of you but sometimes I look at CSS and it’s not documented at all. It is always a good practice to document your code or atleast provide a separate heading for a part of code as it makes working with code months or years later easier.

/**********************************/
/* Primary Navigation - Top Links */
/*********************************/
#nav {
border:1px solid #eee;
margin:10px auto;
padding:5px;
}

/***************/
/* Search Box */
/**************/
#search-box {
position:absolute;
top:30px;
left:30px;
}

Keep containers to minimum

Avoid using too many Divs as it makes your document too much complex and tougher to handle. Avoid block level tags as much as possible and consider all options before using DIVs. New Developers to CSS often mistake DIVs for table cells and maximise their use to achieve the layout. Some people even style their headings with DIVs. Try using small tags or inline tags for goodness sake.

Use Shorthand CSS

Work smarter, not harder with CSS. You can wrap multiple properties within a single declaration by using special syntax. Avoid unnecessary properties as it directly effects your troubleshooting efforts.

Like instead of writing

margin-left:2px;
margin-top:3px;
margin-right:4px;
margin-bottom:5px;


You can write

margin:3px 4px 5px 2px;

Similarly we can use shorthand for border, background, padding, font and other properties.

Specify Units

Always specify units for the Property values unless it is 0. This a very common mistake among CSS beginners. In HTML you can get away with this but in CSS all length values should have a unit. While there’s no wrong in specifying a unit for 0 value, but for me it’s only a wastage of space.

padding:2px 3px 0 10px;

Working with Colors

In hexadecimal notation, a color is represented by three pairs of hexadecimal digits. You can write a color more efficiently by omitting every second digit like this.

#ffffff can be written as #fff

Similarly #ff3366 can be written as #f36

Another color related tip is that you can specify web safe colors by using only digits that are multiples of 3 for the red, green and blue.

Don’t redeclare inherited values

The values of many properties are inherited by any descendants of the element that you specify the property for. So there is no fun of redeclaring those properties again and again. Some of the commonly inherited properties are of font and color.

div { font-size:2em;color:#ef321d; }
div.hello { font-size:2em;color:#ef23ef; }


can be written as

div { font-size:2em;color:#ef321d; }
div.hello { color:#ef23ef; }


Multiple Classes

You can assign multiple classes to a single HTML element. This allows you to write several rules that define different properties and only apply them as needed. The multiple classes (assuming .head & .head-about) can be applied to a single element like this.

<div class="head head-about">This is test for multiple classes</div>


Minimise CSS Hacks

Hacks are the tricks, usually non-standard, to overcome some browser limitations. Don’t use hacks unless it is a known and documented bug as it makes the future maintenance of the code very difficult in absence of proper documentation and standard coding design.

Define pseudo classes for links in the LoVe/HAte order

Link, Visited, Hover & Active, as the above represents. You should define your pseudo classes in this order

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }


Define generic font families

“When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]

p { font-family: Arial, Verdana, Helvetica, sans-serif; }


1 ID per page, many classes per page

“Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]

Horizontally Centering an element

It is very easy to center an element horizontally using HTML with the align attribute, but there is no such property in the CSS. Instead we use margin to center the element like this

margin:0 auto;

Here ‘auto’ automatically divides the space left on the sides of element into half and assigns each half on each side of the element

Conditional Comments of IE

IE versions less than 7 adhere to CSS standards very less and often create a nasty CSS bug or issue to deal with. You can come around the issue by creating a different style to address the issue and then include the style for only IE using IE conditional comments like this.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Next Article in Series CSS Best Practices – II

Getting into Wordpress Theme

Before starting the actual development of the theme, we need to understand how Wordpress actually works and how the content is presented to the users. Well, the short answer is that the content in Wordpress is served by themes to the users. Themes in Wordpress is a combination of CSS and PHP files that reside inside a particular directory at a particular place. The ‘particular directory’ meant for storing of theme related stuff is named with the name of theme and this will be the public identity of your theme. The theme directory resides in wp-content/themes/ directory. Actually, all the Wordpress themes reside under the same directory.

Structure of Wordpress Theme

The Wordpress theme mainly consists of four regions viz, header, footer, content & sidebar. You can theme every region with an independent theme file. Wordpress theme essentially consists of two files, one for CSS named style.css and another for content named index.php. We can run our theme with these two files only and later on add more files to fine tune the theme.

Get Started

Let’s start actual theme development. With your favourite text editor or PHP editor, create a blank CSS file inside your theme folder, let’s say cool-theme, and name it as style.css. Put a few lines of comments at the top like this.

/*Theme Name: cool-theme
Theme URI: http://www.yoursitename.com
Description: My theme is a cool and beautiful theme
Version: 1.0.0
Author: Ehsan Quddusi
Author URI: http://www.authorsitename.com
*/


Well this is the standard comment style for Wordpress CSS file. Actually this information is read by Wordpress to display it in the theme list alongwith the provided thumbnail. You can see the theme list in admin menu of Wordpress under Presentation heading. All the lines in the above comment are self explanatory and you can well understand what they mean. Now that our CSS file is created with the initial theme information in the form of comment, it is time to create the PHP file to display content on the page. Again using any text editor, let’s create a PHP file named index.php
Now let’s put some code into it, to display all the posts available there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Wordpress Theme</title>
</head>
<body>
<?php if (have_posts()) {
while (have_posts()) {
the_post();
the_title();
echo '<br/>';
}
}?>
</body>
</html>


Wow! you are done. With just a few lines of code, you are able to fetch all the Wordpress Post titles from the database. Let’s have a look on the above code. HTML code is same as you will be using for normal web development. Now let’s have a look on PHP code wrapped inside <?php and ?>. Here we are using a condition to verify the output and if available loop through it and display contents. Oh! I know you will be feeling boring. Ok let’s quickly move next. Actually here we are using an in-built function of Wordpress, have_posts(), to fetch the contents of the post. The above function first checks for the posts and if available loops through them to fetch content the content of each of them and display their title using the_title().

It is interesting to note that we displayed titles of all the posts with just few lines of code. Let’s have some fun now. Every post in Wordpress has an ID associated with it and we will provide a link to each title to display its content. Let’s modify the above written PHP code like this.

<?php
if (have_posts()){
while (have_posts()) {
the_post(); ?>
<a href="<?php the_permalink();?>"><?php the_title();?></a><br/>
<?php if(!is_home()) {
print '<p>';
the_content();
print '</p>';
}
}
}
?>


And here it is. Magic! as you can see. Again by adding 4 lines of code, we are able to provide a link to each post title to show its contents on an independent page. This is the beauty of Wordpress. Minimising as much code as possible and maximising productivity.

We will now update our code again to display category with each post as well as date of posting and author.

<?php
if (have_posts()){
while (have_posts()) {
the_post(); ?>
<a href="<?php the_permalink();?>"><?php the_title();?></a><br/>
Posted under <strong><?php the_category(',');?></strong> at <strong><?php the_time('F jS, Y');?></strong> by <strong><?php the_author();?></strong><hr/>
<?php if(!is_home()) {
print '<p>';
the_content();
print '</p>';
}
}
}
?>


And we are done. By putting a single line of code, we have been able to derieve post category, post date & post title for each post. Wordpress API provides all the theme related functions to minimize custom coding. As you can see we used three function in the above written one line. the_category() function is responsible for deriving categories of each post separated by supplied argument ‘,’. We can pass many optional arguments to the the_catgory() function to exclude some categories or provide post counts etc. Another function used is the_time(‘F jS, Y’), meant for displaying date of the post while as the_author displays the link for the author alongwith his/her name. This ends the basic tutorial on Wordpress theming.

One thing to note is that Wordpress allows splitting of code into multiple files for the sake of manageability and granular control over design. Till now we have used only one file in our theme. In the next tutorial we will be using multiple files for theming to achieve granular control along with doing some designing using CSS.

What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255.

PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs web design, primarily because of the impression that PNGs don’t enjoy wide browser support.

This view on PNGs is a bit of a misconception.

While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.

While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.

Microsoft has a plethora of proprietary visual filters and transitions that are available to IE4+. These filters are designed to apply various multimedia affects (transition wipes, light effects and so on) to images in a web page that are viewed with IE. One of these image filters — AlphaImageLoader — lets you display a PNG with alpha-transparency in IE6.

You can employ this filter within the HTML of your page by creating a div element and embedding into it a bit of CSS:


<div style=”position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/image.png',sizingMethod='scale');”></div>


The key property here is the ‘filter’ property. While filter is not valid CSS, it does allow you to apply the AlphaImageLoader filter to the image specified in the parentheses. However, since it isn’t standards-compliant, you may wish to apply this property only as needed (i.e., only when the page is being displayed in IE6-).

By combining this method, developers can build rich image-based designs with alpha transparency like they would for modern browsers like Safari, Firefox, and Internet Explorer 7 that all supports PNG alpha alpha transparency natively.

How to Include PNG Transparency in IE6

One available method for doing this is employing Angus Turnbull’s .htc script:

• First, download the .htc script at TwinHelix Designs. HTC is a
  scripting language
  only usable by Internet Explorer (because it was created by Microsoft) and this specific script contains applies the AlphaImageLoader filter to all images within a web page.
• After downloadign the script, upload the script to your Web server.
• Then, create (or download from TwinHelix) a blank gif file. This image file is 1×1 pixel with the color set as transparent. (Back in the 90s, these were called these gems “single pixel GIFs“). Within the .htc script, change the line that references the blank.gif file so that it points to the gif’s location on the server.
• Create a separate CSS file (we’ll name it ie.css), and include within in the following single line, referencing the location of the .htc file:

  
img { behavior: url(iepngfix.htc); }


  The behavior property let’s you attach a script to some selector (in this case, all img elements). So, this CSS file attaches the .htc file to all of your images, thus applying the desired filter effect to every image within a web page.

• But, we only want to load this CSS file when the page is viewed in IE6-. To do this, just add the following conditional comment to your page’s header:
  
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<![endif]-->

  Conditional comments like these are understood by IE. What the comment says is, “if the browser is IE6 or below, then read the lines within the comment tags. Otherwise, ignore them.” Conditional comments provide a convenient way of applying IE-specific HTML or CSS. Here, the ie.css stylesheet loads only if the page is displayed in IE6-, letting you apply the non-compliant CSS only when it’s absolutely necessary.

While a rather convoluted way to get transparent PNGs working in your web pages (although less convulted than, it does provide a method that is as standards-compliant as possible, giving you the freedom to include the beauty of semi-transparent layers in your designs.