Spry Alignment and Positioning Problem in Internet Explorer 6 and 7

Question

I am designing a website at http://atoment.007gb.com, and neither me, nor my partner can figure out why the Spry Horizontal Menu Bar is loading the way it is in Internet Explorer.  We are doing this for a school project, and eye appeal and workability is a top priority.  I changed and customized most of it, but even if i did keep it the same, it still wouldn't work. I have only the best confidence, that even given the amount i have changed, you will still be able to help me with my alignment problem.
The Submenu Buttons Tile across the page, when they are supposed to go straight down...
the Submenu overlaps the main menu when you hover over it
and the darned thing wont center in any of my browsers, but thats the least of my worries.
Here is the CSS Codes
#MasterNavigator {
width: 1024px;
height: 75px;
#Navigator {
margin-left: auto;
margin-right: auto;
clear: both;
#NavigatorButtonsLeft  {
background-image: url(../_images/MenuButtonBackgroundLeft.png);
width: 128px;
height: 36px;
line-height: 36px;
text-align: center;
vertical-align:center;
#NavigatorButtonsMiddle {
background-image: url(../_images/MenuButtonBackground.png);
width: 128px;
height: 36px;
line-height: 36px;
text-align: center;
vertical-align:center;
#NavigatorButtonsRight {
background-image: url(../_images/MenuButtonBackgroundRight.png);
width: 128px;
height: 36px;
line-height: 36px;
text-align: center;
vertical-align:center;
#NavigatorButtonsSub {
background-image:url(../_images/SubMenuButtonBackground.png);
width: 128px;
height: 35px;
line-height: 36px;
text-align: center;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
And here is my HTML code:
Home
Publishing
Videos
Patents
Wallpapers
Avatars
Userbars
Digital Design
Digital Gallery
3-D Gallery
Sci-Fi
Technology
Structures
Vehicles
Concepts
Web Design
Templates
Graphics
About Us    
Atom Enterprises
Slamerz
The images I used are 20% Transparent, and are listed below.
http://atoment.007gb.com/_images/MenuButtonBackgroundLeft.png
http://atoment.007gb.com/_images/MenuButtonBackground.png
http://atoment.007gb.com/_images/MenuButtonBackgroundRight.png
http://atoment.007gb.com/_images/SubMenuButtonBackground.png
Please try your best to help me.

Answer 1

0087adam wrote:
ok, but how can I make it work with what I have.  All the css codes are the
same, they just have been renamed.
The original SpryMenuBarHorizontal.css does not have any issues in any of the browsers. If you go and modify the original, and it does not work anymore, then the logical conclusion is that you have made one or (more likely) multiple mistakes.
In other words, you cannot make it work with what you already have.
My advice is that you replace the original CSS and work from there; but instead of changing the original CSS, make your changes in a separate stylesheet so that you can monitor and test the code at each change. For instance if you want to change the colour of the text you make a style rule that overrides the original in your new stylesheet as follows:
ul.MenuBarHorizontal a {
    color: #333;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    color: #FFF;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    color: #FFF;
If you want to change the background colour to an image, then follow the same procedure, testing your code at each step.
I hope this helps.
Ben