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.
