Spry menu appearing different in IE Browser

Question

Hi there my spry menu is messing up when viewed in the Internet Explorer Browser.  Everything appears fine when viewed in Firefox and Chrome, the URL is http://www.theboxinghistorian.com/
Here is a view of what it should be like and is when viewed in FireFox and Chrome
And this is the view in Internet Explorer (IE)
After several days of trial and error I deleted the whole script and associated CSS, however when i constructed another spry menu bar the same thing happened.
I then went of and set up a test site, entered a basic spry menu bar and it appeared fine when viewed in IE, basically I have tried everything, any help or feedback would be appreciated.

Answer 1

You have applied a width: auto; to the submenus. In some browsers, that is as good as saying "fill up my page horizontally with whatever you give me for submenus..." or something equally obnoxious, as you have seen!
In this rule:
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     z-index: 1020;
     cursor: default;
     width: auto;
     position: absolute;
     left: -1000em;
give a definite width (I suggest the same width that you gave the submenu items themselves, in this case 163px), and your submenu list items (which are made to float left, and will only stack up if they are in a confined space) should again fall where you want them.
Beth