Overlapping elements - HTML, CSS

Question

My Autocomplete is been overlapped by another Menu DIV (as shown in figure), which has the following CSS.

This occurs only in IE 7 (the most idiotic browser - accoring to me :) ) works fine in IE 8,9, FF etc.

#navlevel2 {
    background: url("../images/bg.gif") repeat-x scroll left -59px transparent;
    clear: both;
    height: 30px;
    position: relative;
    width: 100%;
}
<div id="navlevel2">
    <span class="corner"></span>
        <ul>
            <li>
                <a href="/a/b.aspx"  class="selected"><span><strong>Overview</strong></span> </a>
            </li>

            <li>
                <a href="/v/b.aspx"><span><strong> AAA </strong></span> </a>
            </li>

            <li>
                <a href="/c/v.aspx"><span><strong> BBB </strong></span> </a>
            </li>

            <li>
                <a href="/v/h.aspx"><span><strong>CCC </strong></span> </a>
            </li>
        </ul>
</div>

enter image description here

Can anyone suggest what is the problem here ?

Maybe post the code of the autocomplete as well? Perhaps you need to add a `z-index` to the autocomplete. — jdepypere, Aug 19 '13 at 15:20
Please post your code. I think your autocomplete is in the same element as your menu thus overlapping each other if you put it outside the said element this should resolve the issue — Sebastien, Aug 19 '13 at 15:21
http://stackoverflow.com/questions/6229184/ie7-z-index-issue-context-menu/6229309#6229309 — thirtydot, Aug 19 '13 at 15:22

jampafoo · Answer 1 · 2013-08-19T15:31:25.330

Maybe try adding some z-indexes to your #navlevel2 and whatever you call the overlapping element? for example: say #navlevel1 is the dropdown element

     #navlevel2 {
            background: url("../images/bg.gif") repeat-x scroll left -59px transparent;
            clear: both;
            height: 30px;
            position: relative;
            width: 100%;
            z-index: 1;

        } 

      #navlevel1 {
            z-index: 200;
         }

Overlapping elements - HTML, CSS

1 Answers1