In the past few days, I was given a push to find a suitable method that allowed us to automate the much needed but  painstaking of creating sprites for webpages to improve their performance.The problem was that going through the process of spriting images was a tedious process for a person not used to Photoshop tools and meticulous image adjustments in the corresponding Css.
After spending some time with Mr Google, I stumbled upon an application that allowed us to automate the process, leaving the task of spriting images and adjusting the corresponding css upto the application.

Lets take a look at it. I’m sure that even if you give it 1 shot, you are bound to appreciate the ease of spriting your images to give it another go.

First things first, get SMARTSPRITES : - http://csssprites.org/.

Once you’ve got that done, all you’ve got to do is put in place holders to indicate that a particular image is to be included in the spriting process.
To do that indicate where you would like the sprite to be placed with something like this at the top of your css …

 /** sprite: myspriteVertical; sprite-image: url('../images/myspriteVertical.png'); sprite-layout: vertical */ 

.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px; background:url("../images/header-top.png") no-repeat 0 0;}

.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");
background-repeat: no-repeat;
background-position:0 0; }

.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");/** sprite-ref: myspriteVertical; sprite-alignment: left */
background-repeat: no-repeat;}

  ./smartsprites.sh ~/Desktop/Demo/web-app/css/demo.css 

When the container not wrapping floated divs within it.clearfix hack (which includes the guillotine bug for IE etc). It fixes the problem.

Definition and Usage
This code define in css

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Tips and Notes
Add class in html code

Class=”clearfix”

I happens most often (or is most noticeable) when you’ve got a design that wants to go flush to the bottom of the browser. However, for some damn reason, it just won’t go flush — it is that pesky five or so pixels that just won’t budge. Playing with the padding and margins don’t help — what could it be? Check the containing element and see if you’ve applied the clearfix css hack to it … because if you did, our money is that is your problem.

There are many variations of clearfix floating around the web.The clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, This clearfix method triggers has Layout with some proprietary CSS. Thus Clearfix method effectively clears floats in all currently used browsers without using any hacks.

Support browser

To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method.

Any content between the <canvas></canvas> tags is “fallback content”- meaning, it will be displayed only if the canvas cannot be displayed.

As a script:

function displayCanvas()
	{
      var canvas = document.getElementById("myCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (0, 0, 150, 75);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (40, 30, 125, 75);

        ctx.fillStyle = "rgb(0,0,150)";
        ctx.strokeRect (20, 20, 50, 100);
      }
    }

and this is html

<canvas id="myCanvas" width="300" height="200">Your browser does not support the canvas tag. At the time of writing, Firefox, Opera, and Chrome support this tag.

Here's an image of what it's supposed to look like .
</canvas>

Attributes
width: {Specifies the canvas width in pixels. The default value is 300.Possible values:[Non-negative integer] (for example, 300)}
Height: {Specifies the canvas height in pixels. The default value is 150.Possible values:[Non-negative integer] (for example, 150)}

and upload server where we access.

II. Create in css This Syntex

@font-face {
font-family: 'PalatinoRegular';
 src: url('palatino-webfont.eot');
 src: local('Palatino'), local('Palatino'),
url('palatino-webfont.woff') format('woff'),
url('palatino-webfont.ttf') format('truetype'),
 url('palatino-webfont.svg#webfontoXFrZcNP') format('svg');
font-weight: normal;
font-style: normal;
}

III. We acces in html page as class or Id and define body tag font-family

Values

<a-remote-font-name>

Specifies a font name that will be used as font face value for font properties.

<source>

URL for the remote font file location, or the name of a font on the user’s computer in the form local("Font Name").

<weight>

A Font-weight value.

You can specify a font on the user’s local computer by name using the local() syntax. If that font isn’t found, other sources will be tried until one is found.
Note: When not avaible font local machine . This time  @font- face download fonts in browser temporary download font and display text

Supported font formats

• Internet Explorer (all versions): EOT
• Safari (3.2+): TTF / OTF
• iPhone (3.1) SVG
• Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010)
• Firefox (3.5+): TTF/OTF (.WOFF added 3.6)
• Opera (10+) TTF/OTF

Browser compatibility

## Umar Pahat##
umar@intelligrape.com
www.IntelliGrape.com

position:relative

with z-index ..and voila it works

_____________________
Hitesh Bhatia
hitesh@intelligrape.com
_____________________