SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropdown menu issue with explorer

    hi
    i have a dropdown menu that works fine in firefox, opera and safari but doesnt work in explorer (i am testing on an old pc with IE6). even the rollover doesnt show up as a link when you roll over. i have attached the zipped html file w/ css inserted for ease of reference. any suggestions would be MOST appreciated!
    Attached Files Attached Files

  2. #2
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have a solution for you, but I remember reading within the last year that most developers have dropped support for IE6. According to the w3c IE6 currently makes up less than 5% of the total IE users (http://www.w3schools.com/browsers/browsers_explorer.asp) So are you sure you want to bang your head against the wall to fix something for such a small group. Start testing in IE7, I've found most of my bugs to be in 7 and then everything works fine in 8.

    Hope that helps in some way.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mieche View Post
    According to the w3c IE6 currently makes up less than 5% of the total IE users
    The W3C don't track browser usage. The site you linked to is just a badly maintained site where the target audience is most likely to be running more modern browsers. The actual percentage of IE6 users is likely to be around three or four times what that very specialised site gets since the sort of people looking for the information that site provides are the sort of people who already know how important that it is to keep your browser up to date.

    w3schools is to W3C as Hamburg is to ham.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well thank you for pointing that out stephen, but i was merely trying to suggest that IE6 is in such a limited amount of use that it may not be worth the head banging stors is going through to support it.

    i'm glad you got to feel superior today. i might rethink using this forum for help if these are the kinds of responses people get.

    hope someone out there has a solution for stors, didn't mean to hijack your thread.

  5. #5
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not wishing to go off-topic, but the following link is interesting regarding IE6 use around the world.
    http://www.webdesignerdepot.com/2010...ease-stand-up/

  6. #6
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mieche View Post
    well thank you for pointing that out stephen, but i was merely trying to suggest that IE6 is in such a limited amount of use that it may not be worth the head banging stors is going through to support it.
    Off Topic:


    I agree.

    I stopped supporting IE6 about 18 months ago now. Sure users can choose, or they may not have any choice, to use IE6 but then I can choose to not support it

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great comments everyone, but back to topic...anyone have any suggestions?

  8. #8
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The menu uses li.menu:hover to reveal the dropdown. IE6 only supports :hover on anchors. Search for "IE hover fix".

    The "Menu" anchor does not show as a link because it has no href attribute.

    Sorry to be brief but it's past my bedtime.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As mentioned above you need the IE6 Js helper (google suckerfish menus). You are also using position:fixed which is a bit of a worry because that doesn't make any sense in that context and IE6 doesn't understand fixed positioning anyway.

    IE6 doesn't understand min-width either which means you have put a lot of things in place that Ie6 doesn't understand

    You also seem to have made it overly complicated with all the extra nestings unless you are going to be using them for something special. Here are a couple of examples that you can de construct:

    http://www.pmob.co.uk/temp/drop-down-basic-good.htm
    http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm

    Rather than using display:none they hide the elements off screen and them bring them back which is good all around an especially for accessibility (of course drop downs need a lot more work than this to make them completely accessible).

    Here is the js routine added to your code but it still won't display the same in IE6 due to the reasons mentioned above but you shuld be able to work soemthing out from here.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style>
    #nav {
        height:30px;
        min-width:960px;
        position:relative;
    }
    * html #nav {
        width:960px;
        margin:auto;
    }
    #nav ul {
        height:30px;
        margin:0 auto;
        position:relative;
        width:960px;
        padding:0;
        list-style:none;
    }
    #nav ul li {
        float:right;
        height:30px;
        width:auto;
        list-style-type:none;
    }
    #nav ul li a.primary {
        color:#ce181e;
        display:block;
        float:right;
        font-size:12px;
        height:30px;
        overflow:hidden;
        line-height:30px;
        padding:0 20px;
        text-decoration:none;
    }
    #nav ul li a.primary:hover {
        color:#333333;
    }
    #nav ul li.menu:hover, #nav ul li.over a {
        background-color:#f1f2f2; /* primary link background color */
    }
    #nav ul li.menu:hover a.primary, #nav ul li.menu.hover a.primary {
        color:#ce181e;
    }
    #nav ul li.menu .drop-down {
        background-color:#f1f2f2; /* full bar */
        display:none;
        position:absolute;
        position:fixed;
        margin-top:30px;
        left:0px;
        overflow:hidden;
        padding-top:30px;
        padding-bottom:35px;
        width:100%;
        z-index:100;
    }
    #nav ul li.menu:hover .drop-down, #nav ul li.menu.over .drop-down {
        display:block;
    }
    #nav ul li.menu .drop-down .box {
        width:960px;
        margin: 0 auto;
    }
    #nav ul li.menu .drop-down .group {
        float:left;
        width:165px;
    }
    #nav ul li.menu .drop-down .group .title {
        color:#333333;
        font-size:16px;
        font-weight:bold;
        padding-bottom:5px;
    }
    #nav ul li.menu .drop-down .group .title a {
        color:#333333;
        text-decoration: none;
        background-color: transparent;
        border-color: #333333;
        border-bottom-width: 1px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-style: dotted;
    }
    #nav ul li.menu .drop-down .group .title a:hover {
        text-decoration: none;
        border-color: #333333;
        border-bottom-width: 1px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-style: dotted;
        color:#ce181e;
    }
    #nav ul li.menu .drop-down .group .description {
        color:#333333;
        font-size:11px;
        line-height:15px;
        margin-bottom:10px;
        margin-left:0;
        margin-right:0;
        margin-top:3px;
    }
    #nav ul li.menu .drop-down .group .link {
        font-size:12px;
        font-weight:normal;
        padding-top:6px;
    }
    #nav ul li.menu .drop-down .group .link a {
        color:#505050;
        text-decoration:none;
    }
    #nav ul li.menu .drop-down .group .link a:hover {
        text-decoration: none;
        border-color: #333333;
        border-bottom-width: 1px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-style: dotted;
        color:#ce181e;
    }
    #nav ul li.menu .drop-down .gap {
        float:left;
        height:200px;
        width:15px;
    }
    </style>
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <![endif]-->
    </head>
    <body>
    <div id="nav">
        <ul>
            <li class="menu"> <a class="primary" title="choose a category!">menu</a>
                <div class="drop-down">
                    <div class="box">
                        <div class="group">
                            <div class="title"><a href="#" title="About Us">About Us</a></div>
                            <div class="link"><a href="#" title="Introduction to Meadwell">Introduction</a></div>
                            <div class="link"><a href="#" title="Our Culture">Culture</a></div>
                            <div class="link"><a href="#" title="Our Strengths">Strengths</a></div>
                            <div class="link"><a href="#" title="What Makes Us Different">Different</a></div>
                            <div class="link"><a href="#" title="Services">Services</a></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </body>
    </html>

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanks for the great feedback. i really appreciate a great site like this where people come together to help solve problems instead of just boasting how great they are and how small you are (as i have found on many other forums). Thanks again and keep up the good work! one further question actually, that i am currently trying to solve: the dropdown menu is full screen width on all browsers still, but the ie6 dropdown is only staying at 960px wide (not full screen which it should). any idea how i can resolve this?
    Last edited by stros; Jan 5, 2011 at 08:33. Reason: question popped up

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It gets very complicated to do that in IE6 (if I understand correctly) as IE will treat 100% for the absolute element as 100% of the parents width which is only 960px.

    You'd have to do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style>
    html, body {
        margin:0;
        padding:0
    }
    ul {
        margin:0;
        padding:0;
        list-style:none;
    }
    #navwrap {
        width:100%;
        position:fixed;
    }
    #nav {
        height:30px;
        margin:auto;
        width:960px;
    }
    #nav li {
        height:30px;
        float:right;
    }
    #nav li li {
        height:auto;
        width:auto;
        float:none;
    }
    p.ie6fix {
        margin:0 auto;
        height:30px;
    }
    #nav li a.primary {
        color:#ce181e;
        float:right;
        font-size:12px;
        height:30px;
        overflow:hidden;
        line-height:30px;
        padding:0 20px;
        text-decoration:none;
    }
    #nav li a.primary:hover {
        color:#333333;
    }
    #nav li.menu:hover a.primary, #nav li.over a.primary {
        background-color:#f1f2f2; /* primary link background color */
    }
    #nav li.menu:hover a.primary, #nav li.over a.primary {
        color:#ce181e;
    }
    #nav li.menu .drop-down {
        position:absolute;
        margin-top:-999em;
        left:0;
        overflow:hidden;
        right:0;
        z-index:100;
        height:auto;
        width:100%;
        padding:30px 0 35px;
        background-color:#f1f2f2; /* full bar */
    }
    #nav li.menu:hover .drop-down, #nav li.over .drop-down {
        margin-top:0px;
    }
    #nav li.menu .drop-down .box {
        width:960px;
        margin: 0 auto;
    }
    #nav li.menu .drop-down .group {
        float:left;
        width:165px;
    }
    #nav li.menu .drop-down .group h3 {
        color:#333333;
        font-size:16px;
        font-weight:bold;
        padding-bottom:5px;
        margin:0;
    }
    #nav li.menu .drop-down .group h3 a {
        color:#333333;
        text-decoration: none;
        background: transparent;
        border-bottom:1px dotted #333;
    }
    #nav li.menu .drop-down .group h3 a:hover {
        text-decoration: none;
        border-bottom:1px dotted #333;
        color:#ce181e;
    }
    #nav li.menu .drop-down .group li {
        font-size:12px;
        font-weight:normal;
        padding-top:6px;
        float:none;
    }
    #nav li.menu .drop-down .group li a {
        color:#505050;
        text-decoration:none;
    }
    #nav li.menu .drop-down .group li a:hover {
        text-decoration: none;
        border-bottom:1px dotted #333;
        color:#ce181e;
    }
    </style>
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    
    <style type="text/css">
    #nav {width:100%;}
    #nav li {width:100%;}
    p.ie6fix {width:960px;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="navwrap">
        <ul id="nav">
            <li class="menu">
                <p class="ie6fix"><a class="primary" title="choose a category!">menu</a></p>
                <ul class="drop-down">
                    <li class="box">
                        <ul class="group">
                            <li>
                                <h3><a href="#" title="About Us">About Us</a></h3>
                            </li>
                            <li><a href="#" title="Introduction to Meadwell">Introduction</a></li>
                            <li><a href="#" title="Our Culture">Culture</a></li>
                            <li><a href="#" title="Our Strengths">Strengths</a></li>
                            <li><a href="#" title="What Makes Us Different">Different</a></li>
                            <li><a href="#" title="Services">Services</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>

  12. #12
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers paul for all your effort on this. i really appreciate all your help. i can only hope one day to be somewhere in the neighbourhood of your skillset. if you are ever in canada, drinks on me.


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
  •