CSS Cheat Sheet

Quick access to CSS and CSS3

You can download the Cheat Sheet for CSS2. click here


You can download the Cheat Sheet for CSS3. click here

Best Ajax Loading GIF Generator

Here is the list of all the best website that provide you the best ajax loading gif images, that you can't imagine. You can create your own color and style.

Preloaders

This is the best website that provide you to create gif images with so many categories with different background colors and images.

Chimply

It is also the good site to create gif images.It allows to create images with any width and various features.

Ajaxload

You can get the selected gif images with custom background images with transparent background also.

Mentalized

There are some predefined images you can just save these images and use it anywhere.

Web Script Lab

You can choose any type of image from category and apply colors and use it.

Create Pure CSS Menus

I have seen too many demos and articles on the CSS DropDown menus. I searched a lot and finally found a link to create CSS DropDown menus. Several code use JavaScript files to show the animation on menus. But i like to create a multinavigation menus by using only CSS not javascript.

By FreeCssMenu
You need to download the software and create the menus according to your style. You can create any # level menus by this software. This software will give you the all resources to create menus.
I inspired from CSS3 Menus
You can see the online demo of the menus and here is the download link of both Windows and MAC how to use this software.

By PureCSSMenu

Remove IE6 Headche

I have seen several sites looks ugly in IE6 so what the option to make your site IE6 compatible. I read many articles and pick up some important tips.

The Box Model

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

IE 6 will calculate the width of the box to be 100px.
Modern browsers will calculate the width of the box to be 124px.
IE think more sense logically. IE6 can actually get it right if you are in Standard Compliant Mode.

Double Margin Bug

#box {
   float: right;
   margin-right: 20px;
}

IE 6 will double the 20px to 40px. If you really want to move the element from its parent element use padding.

No Min Width/Height

Setting of a Min Width and Min Height of element doesn’t make sense for IE6. It actually occurs on the footer and you are using background images. So what you will do for this? Here is the solution for this problem.

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Stepdown

Normally when we are using floating objects you can count on lining up untill they are break. IE6 create a link break effect after every floated element that will cause "Stepdown". The fix is to make the line-height of the parent element is set to 0 and element being floated are inline. Please read this article it amazing.

No Hover States

Modern browser can support hover effect on all the elements but in case of IE6 it only understand hover on pseudo class on anchor elements. It works when the anchor element have href=# otherwise it doesn't show hover effect. The solution is to use this link and this can be done by .htaccess.

Problem with Transparent PNG images

PNG transparency only support in modern browsers and greater IE6 versions.You can use this link to apply different PNG hacks for IE6.

Mostly these types of errors occurs in IE. Use these solutions so you site will visible perfect in all the browsers.