IE7 Compatibility Issue with Navigation Drop-Down

Question

0.00/5 (No votes)

See more:

I am building a website for an organization that still only uses IE7. When creating this drop down menu on my laptop, the menu works without a problem. However, when trying it for the first time on a IE7 browser, it does not work.
css code:

CSS

div.hideSkiplink
{
    background-color: #2d4830;
    width: 100%;
    position:relative;
    z-index:2


}

div.menu
{
    padding: 4px 0px 4px 8px;
   position:relative;
    z-index:1

}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;

}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #46714b;
    border: 1px #4e7d62 solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #46714b;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #46714b;
    color: #cfdbe6;
    text-decoration: none;
}

when open the IE7 Browser dropdown wil come Total right side of the page.. page will be left side... scroll thebar.. appear on Navigation mENU...how solve this problem...

Posted 19-Aug-13 19:46pm

akhil.krish

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Aug-13 3:46am

Please show the screenshot.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Alexanbu · Answer 1 · 2013-11-19T02:47:00

OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.

The IE z-index issue:
I really like this dropdown menu and in Firefox (as almost always) everything worked properly. But then I tested in IE. The source code was similar to this

XML

<div id='header'>
    <div id='nav' class='sf-menu'>Here the menu</div>
</div>
<div id='content'>Here the content</div>

Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100.

The fix is so simpel:

C#

#header {
    z-index:2;
}
#content {
    z-index:1;
}

IE7 Compatibility Issue with Navigation Drop-Down

1 solution

Solution 1

Add your solution here

Preview 0

IE7 Compatibility Issue with Navigation Drop-Down

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us