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.
Related
In the past days I switched my menu to mobile friendly version. Is nearly done so far, only one issue remains: In the desktop version I've positioned the submenus absolutely so that they cover what is below when made visible. However, in the mobile version I would like to have them in regular textflow, so that what is below slides down when I make them visible. I'm using mediaqueries and have tried to set the position attribute to "static" but this didn't work:
#Navigation li ul {
position: static;
display: none;
}
My test page: http://ulrichbangert.de/indexr3.php (Resize the viewport to a small width until the menu has one column.) I've used this tutorial: http://www.menucool.com/ddmenu/create-mobile-friendly-responsive-menu.aspx where it works just as I want it to. However I cannot use this one-by-one as I wanted to keep the layout of my existing menu. Best regards - Ulrich
In the meantime I was able to solve this problem on my own: Apparently some CSS attributes cannot be changed when they are in a nested list and not on top level. In this case the attribute position. Afterwards I had the same problem with the attribute width which I could not change to 100% and the attribute padding-left which I could not change either. And some years ago when I implemented the initial version of this menu with the attribute height, which I could not change to auto on hover after setting it to 0 initially. Only setting to a fixed height worked.
How can this be? Is it intended or is it a bug in the browsers implementation? (I tested with firefox).
Anyway my menu works fine now, just as I figured it.
I would post code along with this but I can't seem to find out what type of scenario it occurs in but in IE7, certain elements seem to shrink when you hover over them and as you hover, unhover and rehover them they keep shrinking and shrinking until they are very small blocks of colour. It seem to be elements where thy ahve dimensions like width: 50% and height: 100px. But not 100% sure on this.
Any idea what could be causing this? On first display or after a refresh the site is fine but hovering over has this effect.
Any thoughts?
Are you using boxsizing.htc? Remove it (yep layout is broken but that's a test). Is the bug gone?
I don't have the solution except when removing the HTC from ONE element is sufficient but layout isn't affected. To remove it, just redeclare behavior property with url() value:
.ie67 .noboxsizing {
behavior: url();
}
http://www.mapleboutique.com/
it displays fine, but once you start hovering over things start to get really ugly. I've only tested it so far in IE9 and working my way down to IE6 (ahhhhh).
anway here is my CSS as well. (I tried pasting it here and formatting it with the code tags, I don't know why I can't even figure that out).
http://www.mapleboutique.com/stylesheets/main.css
There are two main problems that I can see:
Your <ul> is invalid. You cannot wrap an <li> in a <div>. The only valid child of a <ul> is an <li>.
It is invalid to reuse the id #hoverNavi. Id's may only be used once on a page. Try using a class instead.
Main.css, line 417: filter:alpha(opacity=93); /* for IE */
It looks like that once an element is set with an opacity < 100, the opacity is not restaured on mouseout, causing float:left on menu elements properties to fail...
Comment this line, so your menu will work (but without transparency). On IE7,8,9.
If you want transparency on IE, try to implement it with jQuery, and don't forget to restaure it onmouseout
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
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.