Anyone who knows anything about SEO knows that it's most advantageous to use text links for the navigation of a website. Using text increases a search engine's ability to crawl your site and identify the content properly, because it can read the text (spiders can't read text within images). However, the aesthetic appeal of using images is obviously greater, you can have effects and aliasing, rather than just plain old boring text.

So, why not have both? With this bit of CSS code, you can use your text links, and then replace them in browsers with images. The spiders are happy, they can read the text. The viewers and website owners are happy, because the website looks pretty.

Let's say you had a navigation layer with the id of "nav". In there you had a link to "products", and a link to "blog".

Here's what your HTML looks like:

<div id="nav">
  <a href="/products/" id="nav-products">Products</a>
  <a href="/bog/" id="nav-blog">Blog</a>
</div>

You want to replace the text with images that are 30px high. This is the most efficient way to do it:

#nav a {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:30px;
}
#nav-products { background-image: url("/images/nav/products.gif"); width: 75px; }
#nav-blog { background-image: url("/images/nav/blog.gif"); width: 50px; }