#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    5
    Rep Power
    0

    Problem with menu in IE7


    My page at gvtdev .davebezaire .com/journeys/bolivia08/living-experience .html validates for HTML and CSS and works fine in Firefox 3.6, Chrome 9.0, and IE 8.0. My problem is in IE 7 which I test by using IE 8.0 in Compatibility Mode.

    In Compatibility Mode, links in the main content, located within a div with id="content", are not clickable. This is because I have a conditional CSS section for [lt IE 8] within the <head> section of the page which includes the rule

    Code:
    #content {position:relative;z-index:-1;}
    If I turn off that rule (e.g., with FirebugLite), the links are clickable. However, the functionality of the main navigation menu items in the little houses across the top of the page does not work properly.

    Specifically, with the rule turned off, only the first three items in the dropdown menus (such as that under "Our Journeys") are accessible. If you try to move down over the 4th item, the dropdown closes. The main menu is in a ul with class="mnu hmnu".

    I've made several attempts to set the parent elements to position:relative and giving them a z-index, all to no avail.

    I would very much appreciate some assistance. Thanks in advance for your help!

    Dave
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    5
    Rep Power
    0
    I found my own answer, and will post it here in case anyone else encounters the same thing.

    I had been setting the background color of the dropdown menus on the <a> tag. I changed to setting the background color on the <ul> tag instead. Thereafter, my dropdown menus function correctly in Firefox, Chrome, IE8 and IE8 Compatibility Mode. I no longer need the z-index:-1 on my #content div, so all of the links are clickable.

    (Please note that the link included in the previous post will no longer exhibit the problem now that it has been fixed.)

    Dave
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Congratulations on finding a solution yourself.

    I recommend avoiding negative z-indexes in general. Some older browsers handle them differently and they tend to cause problems anyway.

    By the way, IE8's "Compatibility mode" doesn't always work exactly like IE7. It's better to test in the real thing.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo