I'm seeing some strange flickering in a JS submenu implemented using jQuery.hoverIntent on this page here. The flicker only occurs over images that are further down the page, hidden by the appearing menu in Chrome and Firefox and the whole menu actually renders behind those images in IE7. Weirdly, the previous implementation (here) works without the flicker. I'm fairly certain that it's CSS issue, since we are in the middle of a refactoring in which we're trying to consolidate stylesheets and scripts. Any help is greatly appreciated :)
EDIT:
Although my initial answer below still works to fix the issue, here is the real cause of the issue and a better fix.
The image further down in the page is in a positioned div (which is position relative). When the menu loads, it sets the z-index last. If you specify the z-index in your stylesheet, the fade will work and it will no longer flicker. This worked for me while inspecting:
ul#topMenuJs li.qnav0>div {
z-index:5;
}
OLD ANSWER: You are seeing the flicker because you are fading in the dropdown menu. You can do two things:
Get rid of the fade altogether and just do a .show() on the dropdown
Give the ul#topMenuJs li.qnav0>div an opacity:1 !important; to override the js
The latter I tested and it works.
Related
I am working on a project were we are using mdc-select for dropdowns and now we have a bug that makes the selectboxes render on top of everything. Which is quite problematic because we need to have a popup render on top of it.
I suspected it might be due to z-index but the z-index of the popup is much higher then the z-index of the selectbox. I tried disabling the z-index of the selectbox in dev tools as well and it makes no difference. What else can there be affecting the layers?
Problem dissapears when removing mdc styling.
It turned out to be a z-index after all that had to be overridden in the popup.
I've altered the CSS of the NAV on this website and now it only functions in Chrome but not Firefox. Drop Downs exist on 'Menus' & 'Catering'. It was developed in WordPress and I assume I am missing something when it comes to the coding in WordPress.
Any ideas?
http://sbserver.wwwsd3.a2hosting.com/devo_williams_freshcafe/
If you reload your page and hover over the navigation item as it loads, you'll notice that the submenu actually is working properly - it appears, but is subsequently hidden as the #main-content element animates in.
I'm not sure as to why this is happening, since your z-index:999999 on the submenu should certainly override the z-index:999 of #main-content. (I'm fairly certain the maximum value for z-index is a lot higher than that.) For some reason though, 999999 is being treated the same as 999, and the main wrapper is appearing over top of the submenus.
Fixing it requires only slightly decreasing the z-index on #main-content. For example, using:
#wrapper.boxed #main-content {
z-index:998;
}
This worked for me (tested in Firefox 20), and the submenu appears above the main wrapper. Hope this helps! Let me know if you have any questions, though I'm frankly a bit puzzled by this as well.
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I redesigned a website for a friend using twitter bootstrap which i supposed would save me from thinking about cross-browser compatibility.
Now I try to use it with firefox only to notice that the controls of the Carousel component move away when you hover them, thus making it impossible to click them. Not to mention it looks rather unprofessional.
The strange behavior can be seen here and occurs to me on Firefox 18.0.2:
http://snow-first.com/snow-rabbit-3/
Anybody has a clue to what's going on? Tried looking in the css but the only thing that should happen on hover is an opacity change...
for the selectors .carousel-control:hover, .carousel-control:focus (line 576 of your CSS) add position:absolute
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.