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
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.
On this page: prolitho.com/wp/about
If you click on the first employee picture (Mary) the image and .profile-cover will move out of the way and you will see among other things a linkedin icon.
In Firefox that icon reacts to hover and is clickable. In Safari and Chrome it is inactive. I can't figure out why. Any ideas?
It has to do with the z-index that is being set to -1 for profile-extra so it's not receiving events.
One way to deal with the problem would be to set the z-index of .profile-extra to something higher than 1 while displaying the extra info
It looks like your pulling the logo in as a fontawesome icon.
.fa-linkedin-square:before {
content: "";
}
Chrome seems to be having issues understanding this character.
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
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/.