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.
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 ?
At http://www.duncannz.com I have a problem that only occurs in Opera Opera prior to v12.0 and IE 8. If you open either of those browsers, visit that website and try to scroll down... it will. Even though the body is only 100% width. When you scroll you see a gap that is part of the <html> element not the <body> element, judging by how that extra bit's background looks.
Why the gap on the bottom in Opera when you scroll down? Also occurs in IE 8.
Any ideas?
Thanks
EDIT: It's not caused by that footer you see - if you visit a longer page like http://www.duncannz.com/pages/text-to-code.php and scroll down that gap is there.
EDIT 2: So this problem seems to be fixed in Opera 12, aswell as the img border-radius not working bug. But I was on an older version and I frequently apt-get update && apt-get upgrade. If I'm on an old version and have never been told about a new one I'm sure others are too. Plus still need IE 8 fix.
EDIT 3:
I've found the reason, but not quite the solution. I have a box-shadow (and PIE workarounds) on my body. When you apply a blur to a box-shadow, the shadow expands. This expansion causes the shadow to dip below the body, and out of sight. However this glitch in older Opera versions, and in IE8, caused the blur of the shadow that was dipping below the body to not be out of sight, and instead create a scrollable area so you can see the whole box-shadow.
If that's unclear here's a demo - set the first value - "Angle" to 0deg, set the 3rd value - "Blur" to 0px and look. Then increase the blur and you'll see the blur of the shadow dipping below the rectangle. Unfortunately on IE8 this blur creates a gap below the body (so user sees the whole blur)
If I remove the blur there is no scrollable area. However I want the blur - it looks horrible without.
How do I do this?
Is there any reason why you have chosen
body {min-height: 100%;}
instead of
body {height: 100%;}
btw it still occurs sometimes in Opera 12.0 when you slowly resize the window. There are states where it is happening. I would say that it must hit something like a rounding error or so in the code.
I would also slightly increase the body padding only for the bottom.
You need to remove the margin of the hr:
hr.blackhr {
margin: 0px;
}
More generally, what you need is a CSS reset to avoid this kind of problems.
If anyone has a better idea for a title, I'm all ears.
Here's a JSFiddle that demonstrates the problem: http://jsfiddle.net/VXsAg/
In a nutshell, I have an element with fixed height and stretch-to-contents width. If the contents are higher than the fixed height, there should be a vertical scrollbar. There should also be ONLY vertical scrollbar, because horizontally it can stretch as much as is needed anyway. Unfortunately I cannot get it to work in a cross-browser compatible way. Here's what I get (the top box is for reference, the bottom box demonstrates the problem):
In IE8, IE9 and Opera 11.60 it appears like this (very good):
In IE7, Chrome 17 and Firefoxes 3 & 10 it appears like this (disaster):
I can see why it happens (width is calculated before scrollbars are taken into account), but how can I work around it?
Apparently nobody knows. Well, I solved it via javascript. Basically I did the autosizing part myself. I calculated the size of the contents; calculated the size of the scrollbar; and set the width explicitly.
I recently just created a website for a company, http://visionaryminds.com/ , For the most part everything is good except for a few browser inconsistencies.
The reason I am posting is an inconstancy I noticed between Chrome and Firefox (IE also had this problem but I used conditional statements to fix them not realizing the problem bled into Firefox)
http://www.visionaryminds.com
When you open the page you will notice a section in the dark gray rounded container that says "Welcome!". In chrome, it is placed where it should be, creating a nice even margin around the entire container. However in Firefox and IE the margin is triple the size.
It appears that despite being in it's own container it's being pushed by the header container outside of it. Anyone have any ideas? I have been at this for days, playing with positioning and z-index with little luck.
Thanks to all who reply,
Spencer
Welcome to the world of negative margins.
In .content_container remove margin-top: -50px and use top: -50px instead.
There's supposed to be an image in the center under the text "GIANT MANGO". It shows in Firefox, Chrome, and IE, but it does not show in the Safari browser.
http://giantmango.com/vote-for-artist-charity-contest-44-2581
How to solve this problem?
It doesn't show up initially with Chrome 9 on Linux either. If you drill down through the developer tools, the computed style for that image shows its height and width to be 1px in both directions. If I remove the max-height: 100% from the div.post-body p img, div.post-body p object rule, the image appears.
While I can't explain this (I haven't the time to look at it in-depth) I hope this puts you on the right track towards debugging this.
On the single-wrapper div, is there a padding-top of 1000px coming in somehow, that's pushing the contained div down? (the image appears in my safari, it's just far down the page).