HTML and CSS works fine in Chrome and Firefox but not IE7

Question

I am developing a site at the moment for Google Sites, and am looking to embed the HTML below as a gadget to display my own custom menu bar. I'm not a HTML or CSS expert so I took this sample code from a tutorial and attempted to use it myself. The problem is that it works fine in Firefox and Chrome but not in IE7.

What is the best way to troubleshoot these types of issues? Is there any tool that can perform an analysis within IE and let me know the issue?

Thanks

<style type="text/css">
body {background-color:transparent}
.outer {display:block}
.outer img {width:100%; height:100%; border:0}
html>body .outer img {display:block}
.outer a:hover {visibility:visible}
.outer a:hover img {visibility:hidden}
#home {background-image:url(https://lh4.googleusercontent.com/-SM4Zlc_m4sE/ToUeELn6dYI/AAAAAAAAAA4/srLee9XEP5s/HomeOnHoverMenuTile.png)}
#news {background-image:url(https://lh4.googleusercontent.com/-UKhdMKoFs1o/ToUryay5cbI/AAAAAAAAACk/Fq4BprNrKYQ/NewsOnHoverMenuTile.png)}
#history {background-image:url(https://lh3.googleusercontent.com/-b41VthyFbjM/ToUeEYy8PQI/AAAAAAAAAA8/zTlQLkQaxrQ/HistoryOnHoverMenuTile.png)}
#clubgear {background-image:url(https://lh4.googleusercontent.com/-ihsPwNu_f6s/ToUeEPSC2XI/AAAAAAAAAA0/G-B6SVXR2DY/ClubGearOnHoverMenuTile.png)}


</style>
<base target="_parent">

<table align="center" style="background-color:#FFFFFF" cellpadding="0" cellspacing="0">
<tbody>
<tr>

<td><div class="outer" id="home"><a href="http://www.google.ie"><img src="https://lh5.googleusercontent.com/-p2m5ub3oghM/ToUqR7X0x-I/AAAAAAAAABo/5YYOpHVrN5E/HomeMenuTile.png"></a></div></td>
<td><div class="outer" id="news"><a href="http://www.google.ie"><img src="https://lh5.googleusercontent.com/-gZbD2wwe3no/ToUqRzW8KcI/AAAAAAAAABk/wErW3cRYDT0/NewsMenuTile.png"></a></div></td>
<td><div class="outer" id="history"><a href="http://www.google.ie"><img src="https://lh6.googleusercontent.com/-iRj10FazPSs/ToUqR82toZI/AAAAAAAAABg/3zOlviqH_ig/HistoryMenuTile.png"></a></div></td>
<td><div class="outer" id="clubgear"><a href="http://www.google.ie"><img src="https://lh4.googleusercontent.com/-4hwFSaBOUh4/ToUeE1XbIYI/AAAAAAAAABI/ngtqhT5gcIE/ClubGearMenuTile.png"></a></div></td>


</tr>
</tbody>
</table>

Answer 1

IE7 and below has some problems with visibility .

So, these styles may be causing the errors for you:

.outer a:hover {visibility:visible}
.outer a:hover img {visibility:hidden}

You can read more here: http://reference.sitepoint.com/css/visibility