SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile Dropdown problem on IE7

    I've implemented some dropdown menus on a site I am creating and they seem to be playing up on IE7.

    They work perfectly on Firefox, Opera, IE8, Safari and Safari on Mac; just IE7 and most likely IE6.

    On IE7, the dropdown menu appears to the far left when you hover over. Does anyone have any idea whats causing this?

    Here is the site:
    http://zoe.fizixstudios.com/production

    This will load the site. I've tried adding conditions for IE7 and adjusting the code, but it doesn't seem to do any good.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    To start with, on the top-level LIs, add position: relative, and then, on the sub ULs, place position: absolute. Then the drop lists will position underneath their main list item.

    Remove float and margin from from the sub ULs.

    Try that and then post back.

  3. #3
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that.

    It's buggered it up on Firefox and IE8 now though. The dropdowns are appearing really out of place.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    OK, I said "to start with". Try removing top: 126px from here:
    Code:
    #mainnav li ul {
        position: absolute;
        top: 126px;
        display: none;
    }
    I'd also be happier to see float: left here instead of display: inline. (May not be making a difference, but worth a try. Float always works for me.):

    Code:
    #mainnav li {
        list-style:none;
        display:inline;
        margin: 0px;
    }

  5. #5
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, I understood that there was going to be more to it, sorry if my reply sounded wrong.

    Well, I've done those two things and it seems to be getting better.

    In Firefox & IE8 the dropdowns are now appearing inline with the menu button, but overlap the button and the links don't appear to be placed one below the other, more side by side.

    In IE7 its doing the same, except the button remains on top of the menu as opposed to behind it like in Firefox; and the dropdown is placed to the right of the button.

    So its getting better
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    Hmmm. Try adding this to the CSS:

    Code:
    #mainnav li ul li {
        width:100%;
    }
    I can't see any other problems, but can't guarantee that this will solve everything. Will help though.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    Might also be worth adding this:

    Code:
    #mainnav a {
        display: block;
    }
    I recently built a very similar nav, and I'm playing 'spot the difference'.

  8. #8
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I see

    Well I've added those to the CSS and the links in the dropdowns (in IE 7 , IE 8 and FF) are showing properly.

    The dropdowns themselves in IE8 and FF are inline, but still hovering over the button.

    In IE7 they are still out of alignment.

    Just need to get the below the button and in the right position in IE7

    TY for the help so far!
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You are using a horrible dropdown technique. Please refer to my tutorial on htis. Adapt it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    O well, it's getting there.

    Next thing I would try is to add overflow: hidden, like this:

    Code:
    #navbar {
        height:41px;
        overflow: hidden;
    }
    May not do anything, but worth a try.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You just need to add left:0 for IE as it doesn't understand auto co-ordinates very well.
    Code:
    #mainnav li ul {
        position: absolute;
        /*top: 126px;*/
        display: none;
        left:0;
    }
    This assumes that the parent lists remain as position:relative.

    It won't work in IE6 as you have no JS in place for IE6 to understand the li:hover rules.

    Don't you want the menu to start under the top level? It looks a little awkward appearing over the current item.

  12. #12
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the replies.

    It's now positioning itself almost properly in FF, IE7 and IE8; still overlapping the main menu; but appearing in the correct position.


    I do want the submenu to appear below the top level, which is what it used to do before we started modifying it for IE7.

    I know it wont work with IE6, but I want to avoid use of JS; hence why I haven't followed RyanReese' guide.


    As far as IE6 is concerened; I'd like to make them work for IE6; but if it's going to involve a load of JS or extra CSS then I will just make the site usable for IE6 users rather then all functionality for IE6 users.

    In other words users on IE6 will navigate by selecting the main section (i.e. Weddings) and then a submenu will appear to the left of the content with links to the subsections. So they will just miss out on the dropdown menu.

    I just want the dropdown menu to appear below the main menu now; IE6 will be supported as best I can without going overboard with the menus code.
    Last edited by FizixRichard; Jul 20, 2009 at 03:58.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Just set the top position on the ul.
    Code:
    #mainnav li ul {
        position: absolute;
        display: none;
        left: 0;
        top:40px;
        padding:1px 0 0;
    }
    You can't use top:41px because that would make it 1px away from the parent list and the focus will be dropped from the hover and the sub menu disappears before you can get to it.

    The suckerfish JS for the IE6 hover is only half a dozen lines of JS and the CSS is only a couple of lines also. You can't do it for IE6 any other way (unless you use Stu nichols masses of conditional comments and invalid nested anhor approach).

  14. #14
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, its working now!

    I shall look at the suckerfish code for IE6
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Suckerfish++
    Actually, Sons of Suckerfish++

    although I use Peterned's whatever:hover .htc fil for the JS (which means IE7 needs a "trigger" not found at suckerfish and for whatever reason, left: auto instead of left: 0 is necessary). For the reasons Paul mentioned (that IE6 doesn't like auto in place of hard numbers sometimes), it took me a while to realise it was the .htc file that needed "auto".

    In other words users on IE6 will navigate by selecting the main section (i.e. Weddings) and then a submenu will appear to the left of the content with links to the subsections. So they will just miss out on the dropdown menu.
    That's excellent, because IE6 users aren't the only ones who won't be able to get your dropdowns to drop down. By having the main menu items actually go somewhere from which the user can navigate further, you've built a nice redundancy in your menu. This is great.

    other users:
    -keyboarders (you can make a menu keyboard-accessible with CSS alone and then you can make it a little nicer with some extra JS if you want)
    -mobile users with stylus or whatever weird things mobiles are using nowadays
    -people with crappy mice like my husband's, or people with crappy hands like my grandma's (she has a palsy). They can get the dropdown to drop down, but navigating it further is very hard. There is a JS that can optionally add a little delay in the mouseover so that if a hand or mouse accidentally goes off the edge of the submenu, the submenu isn't immediately lost.

    Using HTML and CSS for the basics of a working-for-everyone menu with a touch of JS to make it better is the best way, in my opinion. People can be without CSS or with CSS and no JS or whatever and it's always accessible in some fashion and sometimes extremely easy.

    Example, a page with a JS-enhanced CSS menu with redundancy.
    Last edited by Stomme poes; Jul 20, 2009 at 07:16.


Bookmarks

Posting Permissions

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