CSS Image Replacement Technique

The following is a technique to replace text with an image using CSS and no additional markup.  Please be aware that if the user disables images, they will not be able to see the text of an element employing this technique.

CSS Code:

h1
{
  height:[height of image]px;
  background:url([location of image]) no-repeat top left;
  text-indent:-2000px;
}

HTML Code:

<h1>This is some text to be replaced.</h1>

Apply Minimum Height Without a Separate Style Sheet for Internet Explorer 6

Use the following code to apply a minimum CSS height to an element without having to use a separate style sheet for Internet Explorer 6:

#element
{
  min-height:100px;
  height:auto !important;
  height:100px;
}

Creating Modal Windows with Global Headers and Footers

When creating modal window pages in an application, use a separate style sheet to hide unnecessary elements on the pages.

Giving the Clearing DIV Layout in Internet Explorer 6

When creating a clearing DIV, put an empty comment (<!– –>) inside of it to get the clearing to work in Internet Explorer 6 and below.

Get Rid of Padding Around Radio Buttons and Checkboxes in Internet Explorer 6

To get rid of the padding on radio buttons and check boxes in Internet Explorer 6 and below, give the field a defined height and width with the property “overflow:hidden”.

Indenting Hierarchical OPTION Elements

To get indentions on SELECT list items, use the “text-indent” CSS property on the OPTION elements.