css-only rollover background image swap problem -- help?

[Miselaineous]

I wanted to do something that looked interesting, for a spoken-word
artist's site.... I wanted the navigation background image appear to
change with a rollover, and I wanted to do it with CSS.

The following works as intended in Firefox, but breaks in IE and Opera
-- so it's obviously not going to be a valid effect if I can't coax
the code to accept the other browsers.

http://ivanecoyote.com/test.php

When the rollover image in the *span* tag is not a background, it
works in all the browsers I've been able to test. This site of mine
works fine with a very similar technique:
http://sactaiko.org

Anyone with an idea why it's breaking?

Thanks for any input...

-Elaine
e l a i n e a t d y k e t e c h d o t c o m

 

[Jonathan N. Little]

I wanted to do something that looked interesting, for a spoken-word
artist's site.... I wanted the navigation background image appear to
change with a rollover, and I wanted to do it with CSS.

The following works as intended in Firefox, but breaks in IE and Opera
-- so it's obviously not going to be a valid effect if I can't coax
the code to accept the other browsers.

http://ivanecoyote.com/test.php

When the rollover image in the *span* tag is not a background, it
works in all the browsers I've been able to test. This site of mine
works fine with a very similar technique:
http://sactaiko.org

Anyone with an idea why it's breaking?

Thanks for any input...

-Elaine
e l a i n e a t d y k e t e c h d o t c o m

This imported stylesheet for http://ivanecoyote.com/test.php has a
number of 'odd' elements.

HTML comments <!-- ... --> are not allowed in a stylesheet but should be
/* ... */, I believe they are allow in HTML documents between the
<STYLE></STYLE> to hide the code from very old browsers

You have HTML <STYLE></STYLE> in your external stylesheet also a no-no

and not sure what this stuff is?

<!--[if lt IE 6]>
<style type="text/css" media="screen">>
/* HR styles need for IE 5/Win and under. */
#middle { position: relative; }
</style>
<![endif]-->

these special MS conditional comments are for in your HTML document not
your stylesheet, right?