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.
Related
This bug is appearing only in Safari on Mac OS and only with the current set up in our application. Initially I though it was a z-index issue, since some elements disappeared after updating that value.
Although there's a last element that has no z-index value and it's always displayed on top of the full-screen video.
--see screenshot below--
I have tried removing all styling from the bar you see on the screen and it would still appear on top of the video.
--see screenshot below--
As you can see the elements within the bar are still visible.
I haven't been able to reproduce the issue on codepen.io or jsfiddle and nothing is currently available in Stackoverflow or GitHub.
SOLUTION:
removing will-change property from the container solved the issue.
DESCRIPTION
The problem that caused this issue was the property will-change set to one of the containers of this video element.
The structure of the application is quite complex so I am not going to post the whole code here. Although by moving around the video element in the inspector and testing the full-screen functionality every time, I narrow down the problem to one div container that had this property.
If you guys find out the exact reason why the default full-screen functionality of safari broke down because of the will-change property, post a comment or an answer since it will be very appreciated.
I had a similar issue with my application. Web elements were overlapping fullscreen videos. Only effected Safari on Mac OS. I also assumed it was a z-index issue specific to Safari and initially tried modifying z-index when fullscreen mode was detected. Thanks to Guilio G.'s comment above the issue was resolved by removing the -webkit-backdrop-filter:blur(3px); of a parent <div>.
Like Guilio G., I don't yet know why, but this -webkit declaration was causing the issue and removing it resolved the problem.
In my case, this issue was being caused by isolation: isolate on an ancestor element. Removing this property fixed the issue.
Hopefully Safari fixes this, since isolation is a wonderful property that solves a bunch of stacking context issues.
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.
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 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.
I'm working now on a page that has a column of boxes styled with sexy shadows and corners and whatnot using the example here. I have to admit, I don't fully understand how that CSS works, but it looks great.
Inside the topmost box is a text-type input used for searching. That search box is wired up to a YUI autocomplete widget.
Everything works fine in Firefox3 on Mac, FF2 on Windows, Safari on Mac. In IE7 on WinXP, the autocomplete suggestions render underneath the round-cornered boxes, making all but the first one unreadable (although you can still see enough peeking out between boxes that I'm comfortable IE7 really is getting more than one suggestion).
Where could I start looking to correct the problem?
Here's what success looks like in FF2 on WinXP:
And here's what failure looks like in IE7:
Jeremy,
Sorry for this being so late, but hopefully the answer will be of use to you in a future project.
The problem here is that IE creates a new stacking order anytime there is an element with position:relative, meaning that z-index itself is not the only controlling factor. You can read more about this here:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
To solve the problem, if I'm understanding your problem correctly, apply position:relative to the container that wraps your whole autocomplete implementation (and then position:absolute to your results container). That should create an independent stacking order in IE for those elements that allows them to float over the other position:relative stacks that appear later in the page.
Regards,
Eric
The working solution I finally implemented was based on reading this explanation over and over again.
In the underlying HTML, all of the blue rounded corner elements are DIVs, and they're all siblings (all children of the same DIV).
The z-index of the autocomplete div itself (which is the great-great-grandchild of the rounded corner container div) can be arbitrarily high, and it won't fix this issue, because IE was essentially rendering the entire contents of the search box below the entire contents of the "Vital Stats" box, because both had default z-index, and Vital Stats was later in the HTML.
The trick was to give each of these sibling DIVs (the blue rounded corner containers) descending z-indexes, and mark all of them position:relative. So the blue div that contains the search box is z-index:60, the "Vital Stats" box is z-index:50, "Tags" is z-index:40, and so on.
So, more generally, find the common ancestor of both the element that is getting overlapped and the element that is overlapping. On the immediate children of the common ancestor, apply z-indexes in the order you want content to show up.
I'm not totally understanding the setup that's leading to the problem, but you might want to explore the useIFrame property of the YUI Autocomplete object -- it layers an iframe object beneath the autocomplete field, which allows the field to then float above the objects that are obscuring it in IE's buggy layout.
http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame
But the docs say that this matters in 5.5 < IE < 7, so this might not be the issue you're experiencing. So again, without totally understanding the setup you're working with, you might also want to try to experiment with various z-index values for the autocomplete field and the surrounding block-level elements.
Make sure the z-index of the auto-complete div is a larger number than the divs that constitute the rounded corner box. Microsoft puts the z-index of the top elements to 20000 or 100000 I believe. Might be wise to do the same.
I had a similar problem to this, I fixed it by basically just changing z-index for the different divs. Just setting higher number for each div in the order it should display.