[RESOLVED] IE not displaying my images?

[hndda]

Hey. I have rollover buttons on my website. So I have the normal button image there, and the rollover one right on top of it. By default, it's set to invisible, and it is only visible in hover. This is my CSS code:

ul#nav li a span {
	visibility: hidden;
}

ul#nav li a:hover span {
	visibility: visible;
}

And the HTML:

    <ul id="nav">
    	<li><a href="http://google.com/" id="nav1"><span><img src="images/nav1_hover.png" alt="Page 1" /></span></a></li>
        <li><a href="http://google.com/" id="nav2"><span><img src="images/nav2_hover.png" alt="Page 2" /></span></a></li>
    </ul>

Now... this works fine in Firefox. But in IE, it's fine until I scroll over the image, and it comes up with broken image picture. Did I do something wrong?

EDIT:
The original images are specified in #nav1 and #nav2. They work fine.

[Fang]

Works in IE7

Why the span?

[hndda]

Oh wow nevermind. It's because the extension (png) was capitalized and in the CSS it wasn't. I didn't think that'd effect anything.

And if I didn't use a span, wouldn't the normal images not show up either. i needed a way to give that property to only the hover ones.

[Fang]

ul#nav li a img {
	visibility: hidden;
}

ul#nav li a:hover img {
	visibility: visible;
}

[hndda]

Oh yea... because the normal ones are in the ID tag, not IMG.

Thanks! (resolved)