position:absolute and bottom:0 Don’t Work Consistently in Internet Explorer 6

When positioning an element to the bottom of its parent with position:absolute and bottom:0, IE 6 will sometimes put a 1px margin below the bottom positioned elements.  This only seems to happen when the height of the parent element is an odd number.  To fix the problem, add in a CSS JavaScript expression to move the bottom elements down (bottom:-1px) when the height of the parent element is an odd number.

Posted in Bugs. Comments Off

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>

Posted in Tips. Comments Off

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;
}
Posted in Tips. Comments Off