Spry menu shifts to left in IE...again

Question

I feel like this question has been asked 100 times, and I've read through everyone of them, trying the fixes one by one, to no avail. I've officially reached the end of my rope with this one. I followed the rules (*I think*) and edited the CSS to get my colors, etc as I need them. All looks great, except that it looks fine in FFX, but not in IE. The submenu shifts to the left in IE. Can anyone help? I'm sure it's right in front of my face, but I can't see it. Thanks in advance.
Here's the Spry CSS code:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #cccccc;
vertical-align: middle;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: right;
vertical-align: middle;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8em;
position: absolute;
left: -1000em;
height: auto;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 135px;
float: left;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 100%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 0px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #cccccc;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
vertical-align: middle;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #c30100;
color: #ffffff;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
height: auto;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: c30100;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
width: 100px;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* 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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: right;
background: #FFF;
Here's my other page CSS code:
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration:none;
.homepagebodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: normal;
color: #000000;
text-decoration: none;
text-align: left;
vertical-align: top;
padding-right: 200px;
padding-left: 200px;
.homepageheader {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
line-height: 24px;
font-weight: bold;
color: #c30100;
text-decoration: none;
text-align: left;
vertical-align: top;
padding-right: 200px;
padding-left: 200px;
padding-top: 25px;
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: italic;
font-weight: normal;
color: #000000;
text-align: right;
padding-right: 10px;
.bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: normal;
color: #000000;
text-decoration: none;
text-align: left;
vertical-align: top;
padding-right: 10px;
padding-left: 5px;
.bodytext a:link{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: normal;
color: #000000;
text-decoration: underline;
text-align: left;
vertical-align: top;
padding-right: 10px;
padding-left: 5px;
.pageheaders {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
line-height: 24px;
font-weight: bold;
color: #c30100;
text-decoration: none;
text-align: left;
vertical-align: top;
padding-right: 10px;
padding-left: 5px;
padding-top: 0px;
.breadcrumbs {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #666666;
text-align: right;
padding-right: 10px;
vertical-align: middle;
.breadcrumbs a:link{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #666666;
text-align: right;
padding-right: 10px;
vertical-align: middle;
.breadcrumbs a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #666666;
text-align: right;
padding-right: 10px;
vertical-align: middle;
.breadcrumbs a:visited{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #666666;
text-align: right;
padding-right: 10px;
vertical-align: middle;

Answer 1

Before we go any further, you need to upgrade to the latest version of Spry.
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Once you have done that and you re-assign the values in the CSS files, please read the comments first as in
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* 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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: right;
background: #FFF;
Gramps