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.
Related
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.
I have a page in asp.net that does not render correctly in Chrome: when a certain block becomes smaller (because of the number of the elements of a grid on the page) the background does not get entirely refreshed, it leaves a part fom the previous rendering, until changing the tab browser and returning back. Same thing happens when going through blocks that become visible and then hidden. Is there a way to force a re-render of the background (I'm using UpdatePanel and Chrome v 24.0.1)? Or has anyone seen this behaviour and managed to solve this (could it be some z-index css problem)? Please help...
After a while of researching the asp code, the properties of the grid, the css, the foums on chrome bugs, it seems that a css property modification of the div underneath the grid did the trick, I had to change overflow: visible to overflow: hidden.
Issue is Menu is not overlaping or float, above the IFrame i am design the menu with table and Div tag in Usercontrol From and i called Usercontrol from in the Index.aspx.
If any got the idea or experience to solve this issue please help me Thanks for Time and help
Hari
Most likely, you are running into an issue with z-index. For your menu, set the z-index for it and all of it's child controls to a high number, and then set the z-index on the iframe to a low number. If this doesn't solve your problem, you are going to need to continue setting the z-index in the parent elements of both your menu and your iframe because in some (all?) browsers, z-index does a sort of propagation, where if a parent has a lower z-index than one of its siblings, then the sibling will get priority and end up on top.
You also need to make sure that your elements have the css position property set to something other than the default, because z-index only works with positioned elements.
There are also known issues with older browsers with regards to iframes, so if you are using an older browser, try something more modern.
iframes are a tricky beast, so you are really going to have to experiment with various things to figure out your exact issue. I could provide more information, but I would need to see an example of your HTML/CSS where it isn't working.
I have an ASP.NET application that renders a 3rd party (Telerik's) menu control under
another control (RadDock) when the menu expands.
This artifact ONLY happens in IE7. Not in Safari/FF/Opera/Chrome (Have I left any out?)
The menu control needs to be rendered OVER the other control.
I have Google'd this a fair amount, but have yet to find a simple solution to fix it for IE7.
What is the easiest to solve this problem for IE?
Also do you know if this z-index problem has been resolved in the (pending?) IE8?
This Q is not meant to start a browser flame war. Please only respond if you have a
relevant comment.
Thank you kindly.
I don't know if this is similar or not, but I had an issue with z-indexing where when the z-index was applied to the elements of a container, but not to the container itself, the z-index wasn't being properly applied to the child elements. This manifested itself as background borders appearing over the top of the menu items that should have been on top. I solved the issue by applying the same z-index to the container holding the menu items. I don't know how the Telerik controls set up their CSS, but you may want to check that the class being assigned to the container has an appropriate z-index as well as the menu items themselves.
I've had some problems like that before, although not with the 3rd party controls you mentioned. Check to see if either of the controls sets it's own z-index conditionally if the browser is IE. If that's not the case, try setting a specific z-index for each of the controls (or their containers) to make sure IE doesn't fall back to some sort of default unknown z-index.
If the z-index changes do not fix it, it may actually be a positioning problem rather than a z-index problem. Positioning problems are quite common (from my own experience) when you try to do cross-browser compatibility.
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.