I've been struggling with something this afternoon in IE8 and have finally fixed it. It appears that if you have an <a href> with an image inside and a background colour set on :hover and a <br /> tag after it, the background colour actually makes the <a> tag grow in height! If you change it to transparent the problem is solved. Now you'd probably never usually need a background colour on an <a> with an image inside but in my project we use background colour on links (like Flickr does) and sometimes the client puts images inside a tags. Has anyone come across this? Is it an IE8 bug or is there some part of the CCS specifications that I'm overlooking here? Is this expected behavior or a crazy bug as I suspect? Vince
HTML TESTING CODE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> div { text-align: center; float: left; } a:link, a:visited { text-decoration: underline; color: #666; } a:hover { text-decoration: none; background-color: #666; color: #fff; } a.noBg:hover { background-color: red; /* change this to transparent or none to fix the issue */ } a img { border: none; } </style> </head> <body> <div> <a href="http://www.bbc.co.uk/"; class="noBg"><img src="http://ase.tufts.edu/classics/classicalnews/img1.gif"; alt="spinny image" /></a><br /><a href="http ://www.bbc.co.uk/">Text Link</a> </div> </body> </html> ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
![http://ase.tufts.edu/classics/classicalnews/img1.gif"](http://ase.tufts.edu/classics/classicalnews/img1.gif"){kind=link}