This seems to be a common problem but I tried a few solutions and am about to scrap my current menu and try something simpler. I did it this way so I could change backgrounds quite easily.

My problem can be seen here with IE7. Chrome, Firefox, Safari, & IE8-9 both work 100%.

div#menu-bar {
    position: absolute;
    top: 107px;
    padding: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    background-color: #e6edf5;
    overflow: hidden;
    z-index: 2;
    opacity: 0.8;
    border-bottom:1px solid;
    border-color: #a5afbb;

2 answers

danwellman 5600

This blog post details how to fix a common IE7 z-index bug. It may not be the bug you are experiencing of course..

Answered almost 8 years ago by danwellman
  • I tried that first. Didn't work. I played with the z-index of many elements. Nothing seemed to help. Holden Thomas almost 8 years ago

I rearranged all the divs a few times and found an arrangement which was conducive to all of them... most of the time.

Answered almost 8 years ago by Holden Thomas