I'm working on my first SharePoint project doing some UX support. My client's page uses some custom css including a horizontal main-menu with dropdown sub-menus. When the page is loaded in IE9, none of the sub-menus work correctly. The dropdowns appear when you hover over the top-level item but when you drop your cursor down to the sub-menu, the hover doesn't register and the menu disappears.
These links work fine in latest versions of Chrome and Firefox, so I'm pretty sure this is an IE quirk. In IE9, if I open the developer tools and toggle the document mode from IE9 to IE7 and then back to IE9, the menus work correctly for the remainder of the browser tab's lifetime (e.g. when I use the sub-menus to navigate to other pages, the dropdowns continue to function properly). Unfortunately, since this is SharePoint, I don't have a lot of control over the structure of the html here.
Anyone know what might be going on? Does anyone know the impact of toggling the browser modes to IE7 and back and why that might fix the problem? Thanks!
Try this:
<meta http-equiv="X-UA-Compatible" content="IE=7">
It will force IE8, IE9 etc to render as if they were IE7.
Related
I am using bootstrap to develop a responsive website. I have tested it in Firefox, Chrome and IE where everything seems to be working, but the dropdown menu (in main menu) adds a offset to it self in Safari.
I checked the Safari inspector to see what went wrong, but the inspector seems to think that the dropdown menu is displayed correctly - even though it is not.
See http://birdatwork.com/stackoverflow/safari-bug.html for an example of what I am talking about.
The site can be seen at http://kik.vejnoe.orvad.net/en.
Hope you can help find out why it happens.
I have not found out why it happens, but I have found a solution. The solution is that I wrote some JavaScript that listens for clicks on menues and window resize events (only in Safari). Whenever one of these events happens the code will position the menu to the left by using the jQuery offset function.
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
I am working on a site that has a menu that looks great in new browsers, and even IE8 on vista, however in IE8 compatibility mode or in XP for example, the navigation does not work.
I've made a jsfiddle here to see what I mean (sorry, am in a hurry; hover over the "result" part and you'll see the dropdown in action)
http://jsfiddle.net/K3PFd/
It just doesn't work in compatibility mode or I'm assuming older versions of IE. Of course the client is using IE8 which is why I have to fix this...
Can you PLEASE help?
I tested Nvidea css drop down menu on a site with XML Flash rotating banner , it works find on opera but doent work on internet explorer and google chrome, it actually goes behind.
menu from : http://www.lwis.net/free-css-drop-down-menu/
see link here: http://sonymax.co.uk
thx
Seems there is a problem with the menu actually, I removed the banner in IE and the drop-down menu still doesn't show up. Also note, that if you change your compatibility mode from IE7 to IE8 or 9 the menu and banner are way off. You should revise your code a bit.
It works in my Chrome, not sure why it doesn't in yours, only IE has the problem as far as I tested.
Im developing a small web app, but i'm having problems with different browsers.
It seems ok on Chrome, Firefox,
but in IE9 (compatibility mode) the Div menu doesnt position the same way that the other browser,
also in IE9 (normal mode) it position ok the Div menu, but the div below the menu does not appear ok.
the site: http://tinyurl.com/3nmkxjs
Does anyone have an idea?
Thanks in advance!
Joao
Having problems with IE is normal and expected. It's an inept browser.
Remove all the spaces before the doctype to make sure that's not putting IE into quirks mode. I thought that problem was fixed in IE8, though.