I have a simple CSS dropdown menu with an iframe inside it. When I hover my mouse over the dropdown menu, the menu drops down. But when my mouse hovers the iframe inside the menu, the menu goes back. Here's a simplified version of my code:
<div id="comments">
View comments
<div id="comment-wrap">
<iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
</div>
</div>
<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>
This works in the latest versions of FF, Chrome, and Opera.
P.S. The dropdown menu remain dropped down when my mouse is hovering the padding of #comment-wrap.
I have faced similar problems while working with the :hover psuedo class. It started working fine when I changed the Document mode of the browser to IE 9 and the Browser mode also set to IE9. IE 9 has the document mode set to IE8 by default.
Additionally, you can add the following meta info in the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Hope this helps.
I found to have the same problem and i know this is already an old post but i felt like i had to publish my solution. Basicly IE does not accept the :hover event for any tags other than <a> with specified href (wont work on early ie versions), unless you add <!DOCTYPE HTML> at the top. And that was it! Problem solved :).
Unfortunately, this seems to be a browser bug, going back many IE versions. You can use a JS solution as a backup to IE. I've created a jsFiddle example, adapting code from another solution addressing this issue.
Hope that helps!
Edit: further testing in IE9 shows that though the iframe is displayed, hovering over the scrollbars hides it immediately. There is likely a more involved JS fix for this, but it's up to you if you'd like to implement it.
I recently had a hover issue in IE10 (not sure about lower versions) that was driving me crazy. I had my css hover set properly and it was for a div that contained an iframe. The issue was that when you hovered the div it would show the iframe but as soon as you tried to move the mouse into the iframe it would disappear again. I searched everywhere and found nothing for an acceptable answer for me except to use javascript or jquery. After days of trying to sort it out I found a very simple solution that worked for me. I simply removed the iframe from the div and used the object such as
<div class='showme'>links<div style='float:left;' class='showme_1'>
<object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'>
</object>
</div>
I hope this helps folks save a lot of research time.
Related
Last night my Firefox just got updated to version 63 without notice, the image in my website that used to be displayed correctly just got broken.
The image that I put on the web, I used css content class
/*Chrome*/
.pswFilled{
content:url("psw_filled.png");
}
/*Firefox*/
.pswFilled::after{
content:url("psw_filled.png");
}
Before updated, this worked correctly. If chrome is detected, the non-pseudo is applied. Also Firefox uses the pseudo one. However after updated, if both are put like this, Firefox will pick the non-pseudo to use first and vanish the image.
If I remove the non-pseudo line, Firefox picks the pseudo one and the image will display correctly but disappear in chrome.
Anyone experienced this? Please help
Thanks to all those trying to help. I found the problem and already solved.
The problem happened because I put the class into the img element
I thought it should work same way to the div tag. Actually it used to be working before the firefox update to 63.
Before, I wrote this way.
<img id='pwdBox' class='pswFilled'/>
It worked in both Chrome and Firefox (before 63)
but in 63, I have to change it to this
<div id='pwdBox' class='pswFilled'></div>
Thanks to extempl whose enlightened me with jsfiddle
In IE10, border is not getting displayed on page load, it displays only after I hover over that particular section. Its looking fine in IE9 and Firefox, the issue persists only in IE10.
Unfortunately I couldn't share code as its a restricted internal dev environment.
If anyone of you came across such scenario, please share the solution. Thanks in advance!
If you are familiar css then you might also know that the issue you have mentioned "displays only after I hover" will occur only when you have put something like the following in css
#a : hover
{
border:5px solid white;
}
If you haven't mentioned such thing in your Stylesheet or inside html tags then what #MarioErmando said would be the issue. Try using F12 Developer tools in IE to check.
I have a website build on the Wordpress Platform whith an horizontal menu.
When viewed in ie 9+ and firefox it seems okay, but on ie8- the menu css classes seems not right.
I am struggling to find the problem in the css using firebug.
Could someone please give me a hand and help me with this problem...
my website is: www.markett.nl
asfasf
You're using HTML5 tags like header, nav, footer, which are not supported in IE8 and below. If you want this to work in IE8 and below, just add this script in your head :
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
if you look at your IE8 interpreted source - you'll see - IE8 doesnt render nav-Tag proberly. This is because nav-Tag is HTML5 standard - and <IE9 is not able to deal with that. That's why you need to implement html5.js - to solve that issue. You did - but the file doesn't exist.
Its seems like you have used css3 properties in your code. Ie8 dosent support css3.
A work around for this is u can add PIE.htc in your project, here is a link check it out
PIE.HTC
Well the main problem that arises is that IE8 and older dont implement the tag correctly. I would make another wrapper or change it to a div. Also you should left your elements float some more for IE. Hope it helps u one step further.
I have a test site at capitalcitysc and right over the header there should be the soccer club logo named logo.png. Shows fine in Firefox, but IE and Chrome do not. I don't have an easy way to test the css as I use a Mac with Firebug and my test PC has IE6 installed but no developer tools. I have tried z-index and moving the div's position in the header file but have had no luck. Any suggestions? Thanks.
I think you’ve actually got an HTML error: you’re missing the closing > on the logo’s <a> tag:
<div id="logo"><a href="http://wms-clients.com/capitalcitysc/"<img src="http://wms-clients.com/capitalcitysc/wp-content/themes/twentyten/images/logo.png" /></a></div>
Stuff like this is where validation really helps.
I know, it's pathetic, but IT just got around to installing IE8 on my machine this morning. Right off the bat I came across a glaring issue and I've messed around with it for too long even though I KNOW the answer is staring me right in the face.
First off, here's the website: www.mchenry.edu
View it in IE8 and hover over the top banner image - see everything shift down? It's some type of text-decoration or border issue but I can't figure out which. In our test environment, I even tried to get real specific with
#banner p#img a:hover {text-decoration: none};
But that doesn't do anything. And what's even more annoying is that I can't get it to show up in IE6, 7, or FF, or Safari, or Opera, etc. Beating. Head. Against. Desk.
Thanks for any insight you guys may have.
Okay, let's see. This is where the developer tools come in handy.
Using the developer tools, I hovered over the image, and activated the "click to select" feature, as this maintains the "error". I clicked on this small area, and it highlighted the <p id="img">, which now had a height of 128.
Something is expanding the p by two pixels, and editing the source to remove the <a> removes the problem, so clearly, something in there is disturbing it. I'm not seeing what, and it doesn't help that I can't seem to affect the color of that small box.
However, we can do more: we can yank out parts of the CSS. I removed the CSS rules from Records.css one by one, and when a:hover was removed, the problem went away. Going deeper, removing the background-color from there, it stopped!
So, a simple fix is to assign the <a> element a new attribute: style="background-color: transparent".
Note that I didn't test this with any other browsers or versions, but I can't see that rule having affecting other browsers (in a bad way).
try this:
#img a:hover {text-decoration: none!important;}
I have just encountered this same bug under IE8 (version 8.0.6001.18702).
I also traced the problem using the IE8 Developer tools by turning off css statements until I found the one responsible. I an verify that having a background-color on a:hover causes the problem and overriding this with "transparent" does solve the problem.
Unfortunately if you do want a hover background color on your links there isn't a generalised solution - the best you can do is to create a class for "imagelink" which you apply to all your anchor tags which surround an img tag:
<img src="test.gif" alt="test"/>
Then you can use the CSS:
a.imagelink:hover { background-color: transparent; }
This should work around the IE8 bug for your image links whilst allowing you to keep your hover background color on other hyperlinks.
Not very elegant, but I didn't want to follow Jan's suggestion of using a meta tag to force IE8 to render as IE7 (there are lots of things IE8 does better than IE7 and I don't want to revert all the rendering to IE7 over this one issue).
I find it astounding that despite all the hype about IE8 being so much better than older versions we still find bugs of this nature: a colour choice causing a layout issue. Unbelievable. And yet this thread was started back in July last year - and the bug remains unfixed, with more and more developers having to waste their time identifying the problem and dirtying their code with workaround hacks to solve an IE-only issue. It's like IE6 all over again.. Hopefully the EU's imposition of a browser-choice screen into new Windows installs will help open people's eyes to all the proper web browsers out there.
Michael's analysis of the background style of the anchor tag being what triggers this bug in IE8 is spot on. But instead of working around it by adding a style attribute to all the anchor tags, you can tell IE8 to display your page the way IE7 does by adding this meta tag as the first tag inside the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or by adding this line to .htaccess:
Header set X-UA-Compatible IE=EmulateIE7
to force IE8 into IE7 compatibility mode.