IE8 sees horizontal menu as white, with dropdowns not dropping

Question

I previously received a great solution from Altruistic Gramps regarding our menu's background images, but then someone viewed our site (http://www.usc.edu/org/seagrant/NS/) with IE8 and saw the transparent menubars as white. I googled a solution to this, which was commenting out the #FFF in the css IE hack section - background: #FFF; - but then the background was perfectly clear, probably because we have the menus to be semi transparent.
I looked for a solution to this but could not find any, and so opted to create a semi transparent 1x1px png file and using that as a background image
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: url(../Images/clear1px.png);/*background: #FFF;/*/
This works, to an extent: We're using auto as the menubar width in order to get some longer titles to fit and so now, the trans gray texture does not extend all the way across as it does while looking through other browsers. In order to use the 'house icon' I had to enclose the spry menu in another div (located in the main css) and color that, but now I have no idea what to do with the way it looks in IE8
If you need more of the spry css or the main css, please let me know and I'll post it.
Best regards.

Answer 1

Thanks again for the response. I made these changes in the menu css and the index page and the menu went clear again and the subs still don't seem to drop at all. After checking your link to the compatibility modes, I tried each of the IE= samples and the only one that did anything was 5. That just messed up the menu completely. I went back to 9 and it was the same no drop sort of thing.
I was thinking maybe it was the extra div I originally made to keep the home icon in the same group as the rest of the spry menu, so I took that div out, and although the spry menu clicked into place, it still had the transparency and drop-down problems.
I'll post my main css - maybe that'll show something. Excuse the mess, but we've been adding things as we go
Thanks again for spending all this time on it!
ul{
    list-style:none;
    margin:0 0 1em 0px;/*0 0 1em 15px*/
    padding: 0;
ul li{
line-height:1.3em;/*1.3em*/
margin: .25em 0;/*.25em 0*/
padding: 0 0 0 15px;/*0 0 0 15px*/
background:url(../Images/Compass_Website_small_2-4-11.png) no-repeat 0 .01em;/*0 4px - this is the adjustment for line-placement of icon .15em*/
li ul{
margin:0 0 0 30px;
list-style:disc;
li ul li{
padding-left:0;
background:none;
li ul li ul{
margin:0 0 0 30px;
list-style:circle;
ul li ul li ul{
padding-left:0;
background:none;
/* Holly Hack to fix ie6 li bg */
/*  Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */
@media print{
ul {
    list-style:disc;
    margin-left:30px;
ul li {
    padding-left:0px;
    background:none;
} /* end print */
.picture { background-color: #ffffff; /*F9F9F9*/
border: 0px solid #CCCCCC; padding: 3px;
font: 10px/1.4em Helvetica, Arial, Verdana, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.0em 0pt 0.5em 18px; float:right; }/*0.5em 0pt 0.5em 0.8em*/
.left { margin: 0.0em 18px 0.5em 0pt; float:left; }/*0.5em 0.8em 0.5em 0pt*/
body,td,th {
font-family: Helvetica, Arial, Verdana, sans-serif;/*orig Verdana, Arial, Helvetica, sans-serif*/
font-size: 14px;
color: #000;
margin: 0px;
padding: 0px;
line-height: normal;
font-weight: normal;
text-align: left;
a:link {
text-decoration: none;
color: #000000;
input {
font-size: 14px;/*11px*/
line-height: normal;
font-weight: normal;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #0000FF;
a:visited {
text-decoration: none;
color: #000000;
a:hover {
text-decoration: none;
color: #25408F;/*ffffff, 5a5a5a*/
a:active {
text-decoration: none;
h1 {
font-size: 22px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h2 {
font-size: 20px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h3 {
font-size: 18px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h4 {
font-size: 16px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
h5 {
font-size: 14px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
#topmenu {
text-align: center;
height: 20px;
vertical-align: auto;
padding: 0px;
width: 600px;
float: none;
margin: 0px;
font-size: 14px;
h6 {
font-size: 12px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
body {
margin: 0;
#txo-search {
float: left;
width: 812px;
#container{
width: 900px;
margin-left: auto;/*auto*/
margin-right: auto;/*20px*/
border:0px none #000000;
height: auto;
padding: 0px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFF;
#searchbar {
float: right;
padding-top: 3px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 9px;
text-transform: uppercase;
#sidebar{
float:left;
background: #ebebeb;
background-color: #FFF;
width: 225px;
padding: 0px 0px 0px 12px;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
height: auto;
text-align: left;
font-size: 14px;/*12px*/
line-height:normal;
color: #000;
position: relative;
#sidebar2{
float:left;
background: #ebebeb;
background-color: #FFF;
width: 205px;/*205px*/
padding: 30px 0px 0px 0px;/*12px, 20px*/
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
height: auto;
text-align: left;
font-size: 14px;/*12px*/
line-height:normal;
color: #000;
position: inherit;
z-index: 2;
}#textonly{
padding-top: 3px;
float: left;
padding-left: 12px;
padding-right: 0px;
padding-bottom: 0px;
#mainContent{
padding:0px 6px 0px 0px;/*0px 6px*/
width: 650px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
float: left;
position: relative;
height: auto;
color: #000;
background-color: #FFF;
#mainContent2{
padding: 6px 6px 6px 6px;/*0px 6px*/
width: 650px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
float: left;
position: relative;
height: auto;
color: #000;
}#headerpic {
padding:0px 0px 0px 0px;
width: 900px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: -28px 0px 0px 0px;
float: left;
position: inherit;
height: 246px;
z-index: -2;
}#headerpicCaption {
padding:6px 0px 0px 12px;
width: 888px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: -24px 0px 0px 0px;
float: left;
position: relative;
height: 19px;
z-index: 1;
background-color: rgba(149,149,149,0.7);
color: #FFF;
font-weight: bold;
}#horizontalmenudiv {
padding:0px;
width: 900px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px 0px 0px 0px;
float: left;
position: relative;
height: 28px;/*24, 28px*/
z-index: 1;
background-color: rgba(0,0,0,0.0); /*0.6*/
#header {
margin:0px;
border:0px none #000000;
height: auto;
padding: 0px;
float: left;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #990000;
text-align: left;
vertical-align: top;
width: 900px;
z-index: 1;
position: relative;
#footer {
width:900px;
margin:0px;
text-align:center;
height: auto;
padding: 0px;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
float: left;
z-index:1
position: relative; /*background-color: #68a4db;*/
#logocontainer {
width:140px;
margin:0px;
height: 92px;
padding: 0px 0px 0px 12px;
float: left;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
background-color: #990000;
#logocontainer2 {
width:140px;
margin:0px;
height: 92px;
padding: 0px 12px 0px 0px;
float: left;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
background-color: #990000;
.MainTitle {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 28px;
color: #ffcc00;
font-weight: bold;
.homepagethemediv {
font-family: Helvetica, Arial, Verdana, sans-serif;
margin: 0px;
padding: 3px 3px 3px 0px;/*3px*/
height: auto;
width: 205px;
text-align: left;
float: left;
vertical-align: top;
line-height: normal;
.regpagethemediv3x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 3px;
height: 220px;/*300px*/
width: 205px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 0px 18px 0px 0px;
height: 375px;/*300px*/
width: 300px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2xstaff {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 0px 18px 0px 0px;
height: auto;/*300px*/
width: 300px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2xcenter {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px; /*0px*/
padding: 3px;
height: 500px;/*300px*/
width: 270px;
float: left;
vertical-align: top;
text-align: left;/*left*/
line-height: normal;
#center_div
width:270px;
left:50%;
margin-left:-135px;
z-index: 2;
.regpagethemediv1x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12*/
margin: 0px;
padding: 3px 3px 3px 0px;
height: auto;/*300px*/
width: 625px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagefloaterLeft {
font-size:12px;/*12px*/
margin: 0px;
padding: 3px;
height: auto;/*300px*/
width: 45%;
vertical-align: top;
text-align: left;
line-height: normal;
float: left;
border: 2px;
border-color: 25408F;
border-style: solid;
.regpagefloaterRight {
font-size:12px;/*12px*/
margin: 0px 0px 0px 18px;
padding: 3px;
height: auto;/*300px*/
width: 45%;
vertical-align: top;
text-align: left;
line-height: normal;
float: right;
border: 2px;
border-color: #25408F;
border-style: solid;
.smallprint {
font-size: 10px;
.SGBlue {
color: #25408F;
#SGBlue {
color: #25408F;