I have a div having a css class attached to it which has z-index defined. This was working fine for chrome and firefox but not for IE. I had to put position:relative with IE. But the same approach does not work with edge. Nothing is working for Edge.
I have something like a button which when click two elements open, one overlapping the other. The one i want to be on top has z-index 50 and the other one has 20.
Do i need to add some other property alongside z-index to get i working on edge?
<div class="abc">
...
</div>
.abc{
z-index: 10;
}
I am having problem with just edge.
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Thanks to Evert
With my issue, I found a parent container element had a negative z-index, this caused all child elements to ignore their z-indexes.
Removing that negative z-index fixed it for me.
On caniuse and MDN it says that z-index is well supported by both explorer end edge. Are you sure there is not another conflict that explorer don't reconize ? What's up on chrome and firefox ?
Related
I'm having a problem with floating a container to the right in IE7. Everything looks fine in IE8+, Firefox, Chrome, and Safari but the elements within the container wrap for some reason in IE7.
I've set up a fiddle at http://jsfiddle.net/aagC9/. The problem I'm seeing is visible in the IE7 Browser Mode/Document Mode found in IE9 (it's also in IE7 on XP but I figured this would be easier for people to check out).
While it seems like many people have run into similar problems, their solutions haven't worked for me. I've tried adding overflow: hidden and overflow: visible to both the container and elements in various combinations. I also tried setting a fixed width on the .message container, but that didn't seem to have any effect either. While I could just use a fixed left margin on .message, it doesn't work 100% since the IE7 doesn't support the box-sizing model.
Does anybody know the secret to getting this to work in IE7 with the float?
Thanks!
It has to do with your reliance on display:inline-block; which IE7 supports, just not always correctly. Actually, fix for it is pretty gross. But, as in this updated fiddle, it works.
Can you tell what I am doing wrong with the menu buttons? It works on IE8 and chrome but not in FF (9). I presume I've messed up something with positioning and z-index.
link to the site
Thanks.
Edit. It doesn't work on any FF and IE7.
Without downloading the site and playing with it myself, it's a bit tricky to work it out. But, I'd try adding position: relative; to div.content and then adjusting your img.menu(x) by setting left: NNNpx;.
Also, I don't understand why you use position:absolute; on the img tags when you're not using top or left attributes to set the position. Without a surrounding div with position:relative, the img tags will be referencing the absolute position of the entire window not the containing div.
Validate your html that list of errors. First thing noticed, id names must be unique to one element on a page. Also, make sure you are using FF or Chrome as your reference browser.
I have no idea what is wrong. No links (Navigation or image links) work in Firefox but work perfect in IE and Chrome
http://graves-incorporated.com/test_sites/solera_new/index.html
Please help me out
-Dan
I don't have Firefox on my laptop unfortunately, but this problem is often due to another element sitting on top of the links. Usually this is caused by a layout element such as a table or div.
Do you have Firebug or similar installed? There are a few developer tools out there that give you a coloured outline of your elements as you select them. It might help you to identify if you have an element sitting on top the links.
Check element img#rightAligned, it over all your menu links.
try #layout_style_links {z-index:9999999;} or bigger then current your img#rightAligned z-index
You have a td with absolute positioning (!?) that seems to cover the entire page. Don't use absolute positioning on a td element, that's just wrong.
Or even better, don't use tables for layout at all. This isn't the 90s anymore.
This activated the links for me in FF:
td.imageholder {
position: absolute;
visibility: hidden;
z-index: 9999999;
}
So I'm making an auto-complete dropdown list, using javascript. It works fine in IE8+, Chrome, and Firefox, but the alignment is off in IE7.
Here's how it's supposed to look, and here's how it looks in IE7. I've uploaded the HTML here.
Any help would be greatly appreciated.
just add left: 0; to .autocomplete_completionListElement — you have an absolute positioning here and IE thinks that it still must be on a line with previous content, so you need to set left to make IE know where the div must be positioned for sure.
I have a interesting problem with position: fixed in Opera Mobile 11:
Test page: http://dl.dropbox.com/u/841468/testcase/opera/fixed.html
The red <div> should stay fixed on top. If I scroll page down, element moves a bit from top edge of viewport (exactly 93px in device pixels); but if I scroll up, element returns to correct position.
(Screenshot on HTC Desire):
My findings:
Changing zoom level didn't help and didn't change element position from top edge.
It works correctly in Opera Mobile emulators (both 10.1b and 11)
Setting or removing "top" / "left" properties didn't help
Setting "z-index" or "display" properties to some value didn't fixed it
It shows this behavior even when I move viewport with window.scrollTo(x, y)
Setting "zoom" to "reset" didn't work
Mouse events get through this element to element under it (if it is in that incorrect position)
Trying IE hacks didn't work :)
Thanks
This issue has been fixed internally, and the Opera Mobile 11.5 version should roll out with this working correctly.
Unfortunately there is no fix for this, it seems to be a known bug at Opera and they are working on it.
I worked around this bug by using a little Opera specific CSS hack and putting the div to position absolute in the mean time:
noindex:-o-prefocus, div { position: absolute; }
It is a known issue at Opera and we are actively working on a fix. It is though a complex issue involving the painting when rendering.