in my web application i am using Hover Menu (ajax) control. I am using two hover menu controls (one hover menu on that second hover menu) it is working fine, i mean the tow hover menus are displaying fine in Mozilla browser and it is not working in IE. can u help me thank you. I mean one hover menu is displaying but sencond one is not displaying on it in IE.
You're probably hitting the Internet Explorer z-index bug - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/.
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.
I'm using Bootstrap on a website for the first time and have run into an issue with IE (tested in version 11).
I have a login form in a dropdown menu and below the form I have a Facebook login button. No problem in FF & Chrome, but IE (as usual) is acting strange. When the mouse goes over the Facebook login button, the dropdown suddenly closes.
Here's the website: http://www.pricewombat.com/
Steps to replicate:
Go to the website in IE
Hover over Sign In to open the dropdown
Move mouse over the Facebook login button
Feel sorry for IE
What might be causing the issue, and how can it be fixed?
Well, it's an old "bug" which already exists at least as of IE 7.
The problem is, that IE looses the :hover state, when there is an iframe inside the hovered element.
I set up a JSFiddle which worked for me (tested with IE 11 and changed mode via developer tools), but I had to choose jQuery version 1.9.1 as 1.10.x doesn't work!
Explanation: When the li element has mouseenter event (so it is hovered), and also when the iframe is hovered, an additional class name is added to the li. And it is removed when the mouseleave event occurs.
The Javascript code is not that "elegant", but should only demonstrate the needed concept. ;-)
I believe that it may be because of the way IE handles hovering over iframes. When you hover over the Facebook "Sign In" iframe, IE thinks that you are no longer hovering over the dropdown. One possible solution is adding a hover state using JQuery:
$('.fb-login-button').hover(function(){
$('.dropdown').mouseover();
});
If you are using Modernizr, you can wrap this in a nice if statement to make it so that this will only execute for IE.
Unfortunately, I do not have access to IE right now so I am unable to test this out, but this is my best guess. Please let me know if this helps!
I currently have anchor tags in my main navigational menu, which when clicked will open the corresponding accordion item below. The problem I am having is, when you click on the anchor link, the accordion will open 1/2 way down the inside content, and you cannot see the accordion header/title. It is almost like it opens at the bottom of the content.
Everything seems to work with no problems in Firefox and Chrome, but the dreaded IE will not behave.
Does anyone have any suggestions or ideas?
Thanks much!
Jen
Here is my link: http://www.websouthend.co.uk/jc/
I am having issues with my drop down menu.
Under the galleries link there is a drop down, which is dropping down and displaying fine in Firefox, a little funky in chrome but can be fixed with css.
My issue is the links aren't actually directing to the pages... The markup looks ok the anchor tags are surrounding the text and formatted correctly, so I can't for the life of me figure our what's missing.
The sub menu (drop down menu) anchors have a data-toggle="dropdown" i expect this prevent the link from opening. Javascript try to open a new dropdown and the default click behavior stops.
Also see: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/20
I'm really hoping I can find a CSS expert to help with this odd problem.
In Chrome/Firefox and Opera this works fine.
However in IE9 and maybe earlier versions I have a problem.
To see the problem follow these simple steps.
1) Goto www.spoilertv.com and hover over the HOME button/link
2) Hover over the "Twiter Connect" button
3) The menu disappears.
The Twitter Connect button is a Twitter Anywhere button which basically creates an iframe.
Hovering over the twitter button causes the menu and hence the button to vanish. It's as if the mouse has moved away from the dropdown.
This all works with Firefox and Chrome and Opera.
I'm at a complete loss here :)
Looks like this is "designed" IE behaviour
IE7/8: div loses :hover if mouse moves over an iframe which is inside the div!
I've had to replace the Twitter #Anywhere button with a custom button and signin function which removes the need for an iframe
https://dev.twitter.com/docs/anywhere/welcome#login-signup