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...
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
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 :)).
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.
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.
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..
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.
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.
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:
and some css
I can't see anything obvious which would cause this behaviour. Any ideas?
Thanks
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
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?
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
No good :(
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
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
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
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..
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.
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.
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.
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. ;<
Hi John
Glad to hear you got it solved and thanks for sharing the solution :)
Cheers, Jan
is working on a reply...