I am trying to reset the z-index property of an element. It works everywhere except (surprise!) IE7 or IE8-as-IE7. Can anyone point me to the right direction?
Test Case on jsfiddle.net
Frankly I do not hope to have it working in IE7, maybe anyone has ideas for a workaround?
Some context:
The element in question has an input child and is itself located within a jQuery UI Dialog. The Dialog library disables modifications of any fields with lower-than-overlay zIndexes. This feature combined with the above bug means that I can not edit the field even if I properly reset the zIndex for the test element.
Thank you for any ideas you can give!
So IE7 has a strange bug where you have to set the z-index of the parent element too. Check out here
You could also try adding zoom: 1; that sometimes works.
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 worked on a solution since 2 days but i can´t find the problem.
The Problem is that my Navigation/menu is behind a slideshow in the header and that´s only in IE.
All other Browsers worked fine.
Here is the URL: http://ditzinger.de/wordpress/bahntechnik/
Can anyone help me please?
In Internet Explorer positioned elements generate a new stacking context,
starting with a z-index value of 0. Therefore z-index doesn’t work correctly.
giving the parent element a higher z-index actual fixes the bug.
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Set the higher z-index value into your sub-menu class with position.....
I have built a context menu but have found annoyingly that when I right click on my site in firefox all text and images just seem to randomly get selected. It is not a JS issue as I have removed all JS from the site. Thinking it must be a css issue. I have never encountered anything like this before...
I don't have an example page to show I'm afraid. Has anyone experienced this before in Firefox. I am using the latest FF4.
Cheers Guys!
*UPDATE:*
Here is a pasting of the pure html from the page that is having issues,
http://jsbin.com/aneja4/3/edit
did you try to disable all your addons you have installed? maybe one of them is causing the problem.
I have FF 4 but neven encountered this problem before.
And I could be wrong but I don't know of any css code that would be able to select text. it's pure for the design and structure of the site. it will be mostlikely a js problem or something else
I have seen this too... I think it has something to do with the way the site is structured... If you have nexted divs, or a div that does not quite cover the entire page, a right click on the parent div seems to select everything in the nested div. It's quite annoying... especially when trying to build a custom context menu, or use the default menu to refresh the page...
Any fixes/changes that we should know about for FF that is causing this? I'm using FF4 and XP (yeah, yeah... corp. system)
JF
It's likely a problem with your HTML layout that firefox is struggling to work with. But without seeing any code, it's not possible to speculate any further down that path. #JDF's suggestions may help you, though.
If you can't work it out, and can't live with it, you could just disable the ability to select text.
In Firefox (and other standards-compliant browsers), you'd use the CSS user-select: none;.
See this question for more info on how to achieve this: How to disable text selection highlighting using CSS?
This is most likely caused by having a contentEditable element on your page. Any element (other than body it seems) that contains editable content will be highlighted/selected when you right click on it in Firefox (4.0 and 5.0 is all I can confirm). If everything on your page is wrapped in a div it'll appear that the whole page is selected. If you (can) right-click somewhere on the body the regular context menu should work.
Although I can't see any instances of contentEditable in your code on jsbin, it could be added by a script that I can't see (possibly even modernizr?).
I think this is related (although it doesn't match exactly)
http://support.mozilla.com/en-US/questions/766166
http://aloha-editor.org/ exhibits the same behaviour when right-clicking anywhere inside the #wrapper div.
site in question: http://ecogroovellc.com
When looking at the 2nd child menu drop-down (Portfolio>Music), it appears properly in FF and Safari, but not in IE8, where it is hidden within the 1st child drop-down. Any solution ?
Thanks!
I know it's because of the filter (providing opacity) in IE - it causes an overflow: hidden-esque effect.
I attempted to precisely locate it, but there's a lot of CSS/JavaScript to look through and I became disheartened.
What you need to do is remove the relevant filter rule when the fade transition is complete in your JavaScript.
If you set the UL in question (the one with audio and videos) to position:relative, it seems to fix it in ie8, but it screws it up in FF.
I had the same issue. I tried multiple variations, in the end I added filter:none !important; to my css rule on the containing element and that is what worked for me.
if you're trying to compensate for issues on IE8 you should always target it conditionally (add conditional class to HTML then write css targeting .ie8 specifically)
there literally isn't any way to write code that works for everything all at once...
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.