safari 703 browser on mac doesnt display drop downs - bugs

John Halsey 59 posts 220 karma points

Apr 09, 2014 @ 11:40

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

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Apr 12, 2014 @ 21:34

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

Copy Link

John Halsey 59 posts 220 karma points

Apr 28, 2014 @ 15:27

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?

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Apr 28, 2014 @ 15:58

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

Copy Link

John Halsey 59 posts 220 karma points

Apr 28, 2014 @ 15:59

No good :(

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Apr 28, 2014 @ 16:03

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

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Apr 28, 2014 @ 16:54

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

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Apr 28, 2014 @ 17:01

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

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Apr 28, 2014 @ 17:01

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..

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Apr 28, 2014 @ 17:07

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 3: Text 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.

Copy Link

John Halsey 59 posts 220 karma points

Apr 29, 2014 @ 12:02

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.

Copy Link

John Halsey 59 posts 220 karma points

Apr 29, 2014 @ 13:37

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. ;<

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Apr 29, 2014 @ 14:31

Hi John

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

Cheers, Jan

Copy Link

is working on a reply...

Flag this post as spam?

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