So I've been working on a redesign project for my exam that includes a Spry menu bar, but there's a slight couple of problems with it, or actually just one: the Spry doesn't render properly in IE. In IE 6.0, the image that is supposed to show as just one row, merged with the menu, appears as several rows below the logo and doesn't align properly with the spry. In IE 7.0, the spry shows somewhere in the middle of the page instead of being positioned where it's supposed to be. I'm new to using JavaScript, so I have no clue what to do to fix it--using a Spry menu bar is the first time I've ever included JavaScript in any of my pages for any reason. If anyone can help me, I'd greatly appreciate it.

My site can be viewed here:
http://katiem.gknu.com

The code for the JavaScript is:
http://www.katiem.gknu.com/SpryStuff/SpryMenuBar.js

The code for the CSS that goes with the Spry is:
http://www.katiem.gknu.com/SpryStuff/SpryMenuBarHorizontal.css