I've tried positioning the header 'relative' with a high z-index and the content with position relative as well but the drop down hides as soon as I mouse over above where the content starts in IE 7. It's on this page - http://www.legrandconfectionary.com/truffle-flavors/ I thought it has something to do with tool-tip on the truffles but it's happening on every page. Help is greatly appreciated.
I'm going to go out on a limb and say it's related to your tooltip plugin's divs which are left behind after you've no longer hovered over them. You can't see them, but they are there. Try adding this to your CSS file:
.tooltip { z-index: 50; }
Theoretically this will prevent the tooltip from being rendered on top of the UL element making up the drop-down menu. I have a feeling that IE 7 is bubbling the mouseover event onto the hidden tooltip (which probably stops the bubbling at itself) thus cancelling the mouseover event on your UL. Which your nav relies on since IE7 doesn't support :hover on LI elements.
EDIT: After reviewing further I am no longer convinced that it is the div which is created by the tooltip plugin, but I am convinced that what I stated about the plugin cancelling the bubble on the mouseover event. I believe your tooltip plugin is the culprit. Try disabling it and then check if the behavior persists.
Related
I have a user interface situation that i recreated in this jsFiddle. Please have a look.
Basically, the box element should always overlap all others when it is visible (when its parent field is in state :hover. This seems to work fine, visually - but try to move your mouse over the box element while it is still in transition. You will notice that the :hover on the parent element becomes obsolete, causing the box to close again.
However, if you wait a few moments longer before you move the mouse downwards (shortly before the transition ends or once it is done), you will see that the box remains open.
I did tests modifying z-index, even trying to make z-index part of the transition, but to no avail. The problem persists.
Why is this happening?
And how can i modify the CSS definitions in a way that box will open on :hover over field using the given CSS transition fluid and yet being fully accessible (frontmost) from the very first moment the transition starts?
Notes:
I only need this to work in Chrome exclusively.
In my live environment i use a much faster transition, but i made it much longer in this example, because it is easier to test.
I solved this issue by applying a declining z-index on each of the field elements, but i don't like this approach at all because it is a workaround, not a solution.
Give the parent .field:hover { z-index:1; } and change .field > .box { position: absolute; ... } to .field > .box { position: relative; ... }. This is to not remove the boxes from the flow of the page and to allow each field to be placed over the others when hovered
Demo
I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.
My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?
I have looked at these questions and implemented their answers with no luck in fixing the issue:-
facebook iframe App: Send/Like button z-index issue
Other fixes I have found that did not work were:-
Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)
Changing the z-index of the classes that are listed in the answer from the link above.
Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-
All I would like is the flyout to appear on top of all elements on the page without having to change the layout.
Here is the link to my site http://mikelonsdale.co.uk
Thank you for your time and help.
Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.
Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).
The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).
.fb-like span {
overflow: visible !important;
width: 450px !important;
margin-right: -375px;
}
I added
.fb-like span {
z-index: 999999999999999;
}
to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.
I have a dropdown menu which works fine in all modern browsers, but there are some weird things happening in IE9. The dropdown appears transparent or invisible in some way, but its box-shadow is visible. In addition, hovering fails when you mouse off the parent list item.
I am referring to the main navigation bar at the top:
http://gratefulglass.viussandbox.co/
I placed a red border on the submenu's containing element, to illustrate that the menu appears to be positioned correctly.
Any suggestions would be greatly appreciated.
The issue is with the filter CSS properties you're setting on the <ul> and <a> tags in your code. IE9 will render the gradient backgrounds for you, but that causes it to set the hasLayout flag on the element internally, which causes the renderer to treat that element as if it had overflow: hidden; and you can't override that by simply setting overflow: visible; as it's not actually a CSS rule, but rather the way the internal rendering engine will treat the element when processing it. If you remove the filters with filter: none; in an override, or simply don't set them, then you should see everything work correctly again.
Check this links:
1,
2
Sorry, but cant put more links:
http:// && joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/
http:// && www.webdeveloper.com/forum/showthread.php?163100-Opacity-hover-not-working-in-IE
Some properties behave different or are not persistent depending the browser.
But there is always a way to make it work.
Best way to make it work, javascript.
My page is http://bonemarrow.ipage.com/contact/.
I'm using reCaptcha with Contact Form 7 under a Wordpress install. Without reCaptcha, my form looks fine and doesn't interfere with the look of the page. As soon as I pop in the reCaptcha, I new have a gap under the main content area, between it and my footer.
It seems like reCaptcha is pushing the footer div down by about the same height as the reCaptcha table itself. I tried wrapping it in a div of my own (#my_captcha) and setting a height, but that didn't work either.
I also thought it might be because of the way I style the labels and/or fields in my form, so I removed all the styling to see what would happen. No deal, even without styling reCaptcha still insists on introducing that gap.
Any help would be appreciated.
footer{
margin-top: -30px;
}
This is one way you could do it.
EDIT: Based on your comment...
Well you could just be more specific with your CSS for example like this
.some_specific_container footer{
margin-top: -30px
}
Assuming that form class only appears on the page I don't see a problem with that.
EDIT 2:
Just took another look, the problem is caused by the iframe, you currently have visibility:hidden if you add display:none you will fix it. No hacks required. The reason that is happening is because visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. source.
As you can see if you go to the link below in IE7/AOL, the layout breaks if you resize the window. However, click the products menu tab and it rights itself. I haven't a clue why or how to fix it, and it looks sloppy. On resizing the page, the logo and breadcrumb trail div stay where they ought to be, but my horizontal nav menu and everything below the breadcrumb div end up about 20-30 pixels off to the right. On refreshing the page, changing page, or opening a pull down menu item, it all falls back into the correct alignment.
link text
It is working as it should. The li elements in the menu are all floating to the available space. If the window does not have enough space they will float to the next available line. Nothing to see here.
Just use the CSS min-width to stop the DIV from becoming too small for the menu. Or consider a rigid layout (as oposed to a flexible one).
Add the following line to your div to make it work.
#outer {
min-width:790px;
}
To fix incorrectly rendered (in ie7) divs, which correct themselves after hovering over something else, mousing out, or any other weird event, use the below jQuery:
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
The logic is pretty simple, and I'm imagine you could do it just as easily with javascript's "innerHTML". Just rewrite the html contents of the div that's misbehaving, and this'll cause it to recompute the styles.
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}