Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • John Halsey 59 posts 220 karma points
    Apr 09, 2014 @ 11:40
    John Halsey
    0

    Safari 7.0.3 Browser on Mac doesn't display drop downs...

    I have created an Unmbraco website which is currently on a test domain while our content editors complete all the content.

    One of our guys is running a Mac (running Mavricks and Safarai 7.0.3), and has seen that the drop down menus are not working as expected. instead of dropping down they are scrolling in the menu bar. I have tested it in all browsers on PC and it works fine (including safari) and it works on Firefox on Mac.

    I am assuming this is a browser issue and not in my code but then they can use Safari on other sites with drop downs without any problems.

    The site is here, if anyone on a mac would like to have a look...

    http://uat.avenir-telecom.co.uk/

    the About Us menu has a drop down.

    I'm handling the navigation with an xslt macro. here is the code:

    <ul id="navUL">
        <li><a href="/">HOME</a></li>
        <xsl:variable name="home" select="umbraco.library:GetXmlNodeById(1057)" />
        <!-- change lowercase letters to uppercase -->
        <xsl:variable name="smallcase" select="'abcdefghijklmnopqrstuvwxyz'" />
        <xsl:variable name="uppercase" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'" />
    
        <xsl:value-of select="translate(doc, $smallcase, $uppercase)" />
        <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level1]/*  [@isDoc and @nodeType!=1109 and string(umbracoNaviHide) != '1']">
        | <li>
            <a href="{umbraco.library:NiceUrl(@id)}">
                <xsl:value-of select="translate(@nodeName, $smallcase, $uppercase)"/>
            </a>
    
            <!-- Check if second level page exists, and is not hidden -->
            <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
                <xsl:if test="not(./* [@nodeType = 1109 or @nodeType = 1181])">
                    <ul>
                        <xsl:for-each select="./* [@isDoc and string(umbracoNaviHide) != '1']">
                            <li>
                                <a href="{umbraco.library:NiceUrl(@id)}">
                                    <xsl:value-of select="translate(@nodeName, $smallcase, $uppercase)"/>
                                </a>
                            </li>
                        </xsl:for-each>
                    </ul>
                </xsl:if>
        </xsl:if>
    
    
        </li>
        </xsl:for-each>
    </ul>
    

    and some css

    .nav
    {
        background-color: #F2F2F2;
        position: absolute;
        left:0;
        width: 100%;
        z-index: 6;
    }
    .nav
    {
        font-size: 12px;
    }
    #navUL
    {
        list-style: none;
        margin: 20px 0;
        padding: 0;
    
    }
    #navUL li
    {
        display: inline;
        padding: 10px 2px;
    }
    #navUL li a
    {
    
        text-decoration: none;
        color: #000000;
    
    }
    /* Submenu */
    #navUL ul
    {
        position: absolute;
        left: -9999px;
        top: -9999px;
        list-style-type: none;
    }
    #navUL li:hover
    {
        position: relative;
        background-color: rgba(0,148,217,1);
    
    }
    #navUL li:hover a
    {
        color: #FFFFFF; 
    
    }
    #navUL li:hover ul
    {
        left: 0px;
        top: 34px;
        background-color: rgba(242,242,242,0.9);
        padding: 0;
        z-index: 10;
    }
    #navUL li:hover ul li
    {
        display: block;
    
        padding: 10px 2px;
        margin: 0;
        width: 150px;
    }
    #navUL li:hover ul li a
    {
        color: #000000!important;   
    }
    #navUL li:hover ul li:hover a
    {
        color: #FFFFFF!important;;
    
    }
    

    I can't see anything obvious which would cause this behaviour. Any ideas?

    Thanks

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 12, 2014 @ 21:34
    Jan Skovgaard
    0

    Hi John

    This is related to your CSS - I have been trying to figure out what is going on but I'm not really that good friends with the inspector tool in Safari.

    But I suspect you're having a z-index issue. Could you try adding a ridiculously high z-index to this rule #navUL li:hover ul

    /Jan

  • John Halsey 59 posts 220 karma points
    Apr 28, 2014 @ 15:27
    John Halsey
    0

    Hi Jan,

    Sorry it took a long time to post a reply. Kinda got sidetracked!

    I set the Z-Index to 900 but it made no difference, she has the same issue (scrolls instead of drops down).

    Any other ideas?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 28, 2014 @ 15:58
    Jan Skovgaard
    0

    Hi John

    No worries, that happens from time to time - Been there several times :)

    What happens if you set it to something like 900000 instead?

    /Jan

  • John Halsey 59 posts 220 karma points
    Apr 28, 2014 @ 15:59
    John Halsey
    0

    No good :(

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 28, 2014 @ 16:03
    Jan Skovgaard
    1

    Hmmm...

    That's really odd...perhaps you need to put "position:relative" to another element...just can't figure out, which...

    Could you try rewriting your styles so it matches the ones from this tutorial? http://code-tricks.com/simple-css-drop-down-menu/ (If it works in the specific Safari version of course - Works at my machine :)).

    Hope this helps.

    /Jan

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Apr 28, 2014 @ 16:54
    Bjarne Fyrstenborg
    1

    Hi John

    I am not sure what cause the issue on Mac and in Safari - it might be something to do with the html markup or css.

    An idea might be to create a simple html document with the html markup and the css only needed to create to navigation and just use some static content.
    You could e.g. use the example Jan is refering to and then upload the files to e.g. a subdomain, where you are able to test the navigation.

    Sometimes it might be easier as you only have minimal content and the css needed and you ensure nothing else conflict with your styling.

    When you then see it's working in that specific browser on Mac you could implement that into you Umbraco solution.

    /Bjarne

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 28, 2014 @ 17:01
    Jan Skovgaard
    0

    Hi guys

    I just like to add that it's important to keeps things seperate - and for other users eventually newcomers who may just be starting out to learn Umbraco, who come across this I think it's important to mention that this issue has to do with CSS...eventually HTML markup (But I doubt it), which has nothing to do with Umbraco as such.

    Otherwise +1 for Bjarnes suggestion - Sometimes it's just easier to boil it down to bare bones markup and styling outside of the Umbraco context to minimize potential confusion.

    /Jan

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Apr 28, 2014 @ 17:01
    Bjarne Fyrstenborg
    0

    Furthermore I would also recommend you to check the website with a validator like http://validator.w3.org/ ... sometimes differences in browsers could be solved after fixing validation errors as some browsers succesful can render syntax error or validation errors, while other may fail or render it different..

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Apr 28, 2014 @ 17:07
    Bjarne Fyrstenborg
    0

    One more thing.. have you tried remove pipeline characters from the html markup? I am not sure all browsers accept it or render it correctly as it gives a validation error:

    Line 94, Column 3Text not allowed in element ul in this context.

    |<li><a href="/work-with-us.aspx">WORK WITH US</a><ul><li><a href="/work-with…

    Try stay with a clean <ul><li> strucure.. eventually place the pipeline characters inside <li> element or use css to add to borders and control the spacing with padding and/or margin.

  • John Halsey 59 posts 220 karma points
    Apr 29, 2014 @ 12:02
    John Halsey
    0

    Thanks for all your comments.

    Nothing yet seems to be working. I've amended the errors in the mark-up, and I've used the code in Jan's example to create the drop down, but it still doesn't work on the Mac. I've also discovered that it's the same issue on iPhone and iPad. But not just Safari, even Chrome on iPad does the same thing, so its something Apple related.

    I don't think I've ever had this problem before, it's bizarre.

  • John Halsey 59 posts 220 karma points
    Apr 29, 2014 @ 13:37
    John Halsey
    1

    OK, I worked it out.

    I had a media query that was hiding an overflow on a different element! I took that off and it works. Man that was painful. ;<

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 29, 2014 @ 14:31
    Jan Skovgaard
    0

    Hi John

    Glad to hear you got it solved and thanks for sharing the solution :)

    Cheers, Jan

Please Sign in or register to post replies

Write your reply to:

Draft