Michael Plant

Image you wanted an anchor tag to fill the entire space around an image background as well as the text. Generally I use padding on the anchor tag and Display:Block to get ti to display the way I want. The problem is that in IE6 the display block isn’t enough. It will still only activate the hover over the text portion of the element and not the padding.

Yesterday, I ran across this again and tried giving my anchor tag a width of 100% and it worked. The surprising part is not only did it fill the entire width properly but now the height was working as expected. So the bug I see is in declaring a width for a block level element. If you do not declare a width the anchor remains an inline element as far as hover goes but does take the rest of the properties as expected; padding, height, etc. So apparently this simple fix is to add a width to the anchor as well as the block declaration and it will truly become a block element.

Here is an example in case I lost you:

With no width defined in IE6 the hover will only register when you are directly over the text. As I said the padding still works but the hover doesn’t. Now let’s do it again with a specified width.

If you don’t have IE6 or a way to preview site’s with IE6, I would suggest going over to Microsoft and getting Virtual PC and downloading the IE6 compatibility virtual hard drive. These will allow you to run another Windows XP operating system, complete with IE6 SP2, without leaving your true Windows operating system. I use this to test my CSS for cross browser compatibility before I launch all my site’s.

While you won’t notice a difference with modern browsers there is a huge difference from what IE6 does with the first link.