I have a simple animation that put an element into "position: absolute" to translate it.
Works perfectly and as expected on Chrome.
On Safari, absolute positioning is completely ignored...
Fiddle : https://codepen.io/anon/pen/YvVZNv
Am I missing something ?
note: I don't want to transform:translate instead of left
Thanks
Set the position outside of the keyframes, updated example which works in Safari
Related
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 ?
I have a same business requirement as identical to the jsfiddle example -->
`http://jsfiddle.net/tpN7m/3/`
Now this is working fine will all the browser even in IE. Here the problem is that the border is not displaying or even not working for the hover menu in IE alone. I am using IE 11. how to fix this issue.
I replicated the same code in my project .
Help me to fix this issue.
Change the z-index and position of the iframe. Alternatively, place a wrapping div around the iframe and play around with the z-index and position. Also try adding a z-index to <ul class="reltab-moremenu-content" id="tabMore">.
I am adding the screenshots from IE 11 and chrome for better clarity on the issue
Hi guys I'm trying to crop an image using another div. Margin -left,-top,-bottom work, but for some reason margin-right does not seem to be working for me on chrome. Any ideas what I should do? I've been trying to figure this out for hours :c
http://knowmad.herokuapp.com/sunapp/10/
I'm not quite sure why the margin-right isn't working but did you consider using the clip property?
http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties
Use pixels in margin-right instead of percentages. ie margin-right:20px
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 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.