Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Menu problem with IE7

    Hi All,

    I was almost done with my website so i tought lets check it out in a few browsers. Now i noticed that my menu is totaly different in IE7 all newer browsers work fine. The hover images is only until have and the submenu is not in the right place.

    Anybody some hacks or other things i should change?

    my site:
    www.rrdesign.nl/HELMA/index.html

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Any knows a way to fix this?

    www.helma-online.nl

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    It's a very time-consuming thing to discover and fix errors in nested (2-level) menus. That's probably why nobody responded. However, there is a tutorial with which rewriting it so that it does become cross-browser becomes really easy. See Create a Drowdown/Flyout Menu with CSS. That tut might also give you the insight to fix the problem without rewriting the whole thing.

    Please let us know how things worked out.

  • Users who have thanked Frankie for this post:

    rrdesign (09-21-2011)

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you frank, i will try that out and see if it will help.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Code:
    #nav li.subNav ul {
        display: none;
        position: absolute;
        top: 31px;
        z-index: 10;
        left:0
    }
    should sort out your dropdowns being in the wrong place. And

    Code:
    #nav ul li {
        float: left;
        font: 0.75em/1.5em Arial,Helvetica,sans-serif;
        padding-bottom: 16px;
        padding-top: 15px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
    }
    sorts out the hover behaviour I think.

  • Users who have thanked SB65 for this post:

    rrdesign (09-22-2011)

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by rrdesign View Post
    Thank you frank, i will try that out and see if it will help.
    I felt obliged to also write a tutorial on dropdown menus with variable width for the main menu items and their submenus, such as is the case in your site. Check out v. 2.0 of Create a Dropdown/Flyout Menu with CSS. Tested with and found in order in IE6 through Chrome 13.

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks a million SB! Those 2 simple things did the trick!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •