I'm having a strange issue with an Ajax menu in IE7. The content that should be hidden by the menu's background comes through, as if the menu is transparent. Here's a screenshot:

http://screencast.com/t/ZjljYTE1

I've attached my source HTML and CSS below. Here's a snippet of the relevant CSS:

.menu_subnav {
    inherit: none;
    background: #82000c;
    position: absolute;
    margin-top: -46px;
    margin-left: 153px;
    z-index: 10001;
}

#paninipedia-menu-top .menu-ingredients li li {
    background: none;
    position: relative;
    width: 153px;
    height: 11px;
    margin-top: 1px;
    margin-bottom: 0;
    padding-bottom: 4px;
    z-index: 100001;
}

Any ideas? I can't understand why this is showing up as transparent...

  • Is it only in IE7? Ste4lth over 6 years ago

1 answer

Ste4lth 28
1
point

Take into consideration that the opacity class isn't supported in IE7 as it's CSS3, I found some somewhat relevant code that might be causing the issue.

#sidebar-text p, #sidebar-text a {
    font-size: 10.4px;
    line-height: 14px;
    color: #000;
    text-align: right;
    display: block;
    float: right;
    opacity: 0.7;
Answered over 6 years ago by Ste4lth