Internet Explorer Anchor Image Bug


Internet Explorer has a CSS bug putting a border around an <img> when using it inside an anchor.

The issue is specific to floating images and only manifests when a border is applied while hovering. The following CSS definition should cause a border to appear around an image when hovering over it with the mouse:

   a:hover img  { 
      border:2px solid red; 

   img { 
      border:2px solid white; 

If there is no default a:hover defined, no border at all will appear as seen here. If there is a default a:hover, such as:

   a:hover { color:red; }
then only a partial border appears around the top of the image as seen here.

The only workaround I’ve been able to find is to include an zero-px border for the default a:hover. Adding this to the style fixes the problem:

   a:hover { border:0px; }
See the working example here. This site employs this fix.
» Posted: Friday, November 1, 2002 | Permanent Link