IE 6 has a known bug where background images assigned to a tags via css will "flicker" when hovered over or when the page is scrolled. This is due to some quality code that refreshes the image whenever any changes occur in the display (like scrolling or hovering). I recently ran into this issue while working on my wife's site. She wanted the main "Well Mannered Mutts" logo to be a link to the home page. A reasonable request. Since the image is just a graphical representation of content, I set up the logo area like this:

<div id="page">

    <h1><a href="/" title="Well Mannered Mutts">Well Mannered Mutts</a></h1>

   ...

</div>

Then did my favorite image replacement technique:

#title {

   margin: 0;

   padding: 0;

}



#title a {

   display: block;

   background: url(/images/logo.gif) no-repeat top right;

   padding: 147px 0 0 0;

   height: 0;

   overflow: hidden;

}

Then came the flicker. I took advantage of the fact that there was a dedicated container element and changed the stylesheet to:

#title {

   margin: 0;

   padding: 0;

   height: 147px;

   overflow: hidden;

   background: url(/images/logo.gif) no-repeat top right;

}



#title a {

   display: block;

   padding: 147px 0 0 0;

}

The image in the h1 isn't subject to the flicker, and the overflow: hidden hides the content of the link since it was top padded by that same amount. The entire visible area of the logo is linked, but the link text is below the radar.