IE bug concerning CSS and IMG tag

Of course, as usual, IE doesn't respect standard and there's a bug when using CSS and color/border attributes with IMG tags.

However there's a solution: http://rob.rnovak.net/content/archives/Individual/000039.php

Many already know this, but for someone relatively new to style sheets, CSS and the land of the DOM (Document Object Model), it's suprising.

IE has a bug in CSS property inheritance with <img> tags.

If one has a style sheet that includes the following:

 A { color: #CCCC66; text-decoration: none; }
 A:link { color: #CCCC66; text-decoration: none; }
 A:visited { color: #CCCC66; text-decoration: none; }
 A:active { color: #FFFF99; }
 A:hover { color: #FFFF99; }

and HTML that looks like the following:

 <a href="http://some.link"><img src="somegraphic.gif"></a>

In Netscape and Mozilla, the border around the image will be the same colors as the text links. In IE, however, the link style properties do not inherit inside the image tag.

To make both behave identically, you need to have a style section that looks like thus:

 .graphic {border:2px; border-thickness:1px; border-color: #CCCC66; border-style: solid;}
 A:link { color: #CCCC66; text-decoration: none; }
 A:visited { color: #CCCC66; text-decoration: none; }
 A:active { color: #FFFF99; }
 A:hover { color: #FFFF99; }
 A:hover .graphic, A:active .graphic {border:2px; border-thickness:1px;
 border-color: #FFFF99; border-style: solid}

and modify your HTML code appropriately:

 <a href="http://some.link"><img class="graphic" src="somegraphic.gif"></a>

In other words, set up a style class for images, and set the link style for the image class identical to that of the top-level text link class.

I imagine you would be able to do this likewise by re-defining the "img" tag when it is nested inside an "a" tag, but I haven't tested that.

Posted by Rob Novak on Sat Aug 30, 2003 | Comment on this entry | TrackBack The contents of this site are 2003-2005 Robert Novak. See the Creative Commons License information on the main page for details on how you may use content posted here.

Page generated by UWiKiCMS 1.1.8 on Mon Feb 20 2017.
Copyright © 2009 Christian Mauduit. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
Updated on Tue Oct 06 2009.