Spry Menu background is white in IE

Question

I've created a vertical Spry menu with submenus. The menu should not have a background color, so it should take the color of the image it's on top of. This looks fine on Safari (Mac) and Firefox (Mac/Windows), but on IE 8 (Windows), the menu background is WHITE. This makes it difficult to see the menu items. What can I do so that the menu background is transparent and does not show up white in IE?
The site: http://chrysacupuncture.com
I'm attaching index.html, my own css file, and the Spry css file.
Thanks for your help.

Answer 1

Actually, now that I look at it, I think one of your IE hacks might be malfunctioning:
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
     ul.MenuBarVertical li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
This is the bottom-most item in your CSS file.  Notice the typo in the float:left and that it does indeed state a white background background:#FFF.  I don't usually put IE hacks external CSS, you might try moving it to the main HTML file and using IECC.  Place it in the header as you would if you had internal CSS:
<!--[if IE 5]>
<style type="text/css">
ul.MenuBarVertical li.MenuBarItemIE
          display: inline;
          float: left;
</style>
<![endIf]-->
I removed the background color altogether, but you may have to define one (I don't usually support IE5 so I'm not sure).
If you insist on having this hack externally, you can try placing the background: transparent in the first item of your CSS:
ul.MenuBarVertical
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: 9em;
     padding-top: 80px;
     background: transparent;