I am building a design and have it pretty much done however an item I have positioned absolutely will not show the overflow in IE7. It works for every browser but IE7.. I'm not supporting ie6. The div/image will not show anything past its parent container in IE7. I've tried a higher z-index, overflow:visible with no success.. The absolute positioned div is in the top nav bar left of the first menu item.. should be obvious
The site is here
thanks for any help or suggestions
To fix it in IE7, do the following:
Remove:
position: relative;
From .navbar-inner
It's a bit redundant to have it on inner, because it's container is already set to a relative position (they are the same size/shape). It will carry the same effect without it on the inner div, and give you the results you're looking for.
Try giving .navbar-inner a higher z-index value than you have given to the absolutely positioned DIV.
I'd reduce your absolutely positioned elements z-index down to something like 100 and make .navbar-inner 101.
Related
I havent found this exact question.
I have a page set up as
<div id="page">
<div id="chrome">
<div id="element">bla</div>
<div id="content">bla</div>
</div>
</div>
#page has position:absolute, and dimensions
#chrome has position:static, and overflow:auto
#element has position:absolute, right:0, top:0
#content has a large amount of content. it scrolls within #chrome, whereas #element stays fixed on the #page, without needing position:fixed.
http://jsfiddle.net/pike/x4kshd3f/
In some browsers - mainly windows i think - the #element overlaps the top of the scrollbar of the #chrome.
Is this correct behaviour ? Is there a way to make the scrollbar of the static #chrome appear on top of its absolutely positioned children ?
PS .. there is a reason why its structured like this. I cant use position:fixed. I cant put the scrollbars on #page. #chrome has to be static.
It actually happens on other browsers/platforms too, and yes, I'm afraid its intended behaviour.
Element with static positioning do not create a stacking context. the #element, which has position:absolute, has a stacking context. the effect is #element overlays #chrome, in a sense.
What seems to solve it in edge browsers is css
#chrome { isolation:isolate }
which is a css candidate from 2014-12. and a very sensible one.
https://developer.mozilla.org/en-US/docs/Web/CSS/isolation
http://dev.w3.org/fxtf/compositing-1/#isolation
There are other ways to create a stacking context, but they all seem to interfere with the absolute positioning of #element, making it 'relative' to #chrome instead of #page (making it scroll along with the #content instead of staying fixed).
Still open for better supported solutions - I won't accept this answer.
I'm having issues with IE8 and hope that someone can point me in the right direction.
So I have a parent which is relatively positioned. The parent has two children of which one is absolute and one relative in position. When you hover over the parent, the left values of the children change and the relatively positioned one is supposed to overflow and be hidden.
Here's a fiddle: http://jsfiddle.net/Sladkoff/s7ub9zL8/3/
"Normal" Browsers hide the relative child if it overflows but IE8 will still display it no matter what.
I'm not quite sure if anyone will be able to test this in IE8 thought, since I had to open http://jsfiddle.net/draft/ to see it there. Don't know how this works for guests viewing the fiddle. I guess you need to have it open in e.g. Chrome and then switch to the mentioned link in IE. Let me know if it works...
Any Advice?
Thank you.
Try to use z-index to position your objects in the stacking order you need.
.absolute {
z-index:1;
}
.relative {
z-index:2;
}
I am trying to implement a grid like layout of images with their corresponding title absolutely positioned relative to that image.
usually when the parent is positioned relatively, the child position absolute works perfectly. Not in this case :(( No matter what I've tried I cannot get this to work.
Sorry had to delete the code as images no longer available.
Michaels solution worked.
Your .hero div has an effective height of 0. Give this element a height and your absolute positioning will work as expected.
The nav works the same in every browser i've tested on a mac and pc; however, I cant for the life of me figure out why in IE7 the nav is appearing under the content in the main content block. Check out http://obs4.dynapp.net/ to see the problem, it only exist in IE7. Check out the source if your interested in helping out with the problem. I dunno, I've spent hours staring at html/css and cant figure anything out.
http://obs4.dynapp.net/
This is a seriously annoying IE7 bug. It occurs because positioned elements later in the DOM will be given priority over those earlier in the DOM, regardless of z-index status.
This article will explain how to fix it: http://thedesignspace.net/MT2archives/000763.html
Basically, add position and z-index to the least common ancestor. So, if your header and content are both contained in a container, add position and z-index to that container. If they're direct children of the body, add it to the body.
Hope that helps.
z-indexing is weird with IE7. You have position: absolute for your nav. You have position: relative for your content. Yes, z-indexing should work where your position doesn't matter, but IE7 will take that into affect and give you two different "stacks" for z-indexes so absolute and relative positioned elements do not interact with each other. Try giving your nav a position: relative instead and then readjusting your css accordingly.
Open up http://irule.at/quovadis, and it will show you a regular theme. The problem is that the div photos is not showing up. It's most likely hiding behind body/html because of the z-index, but I want them to show behind the divs in the middle. How do I fix this?
It looks like you're using a negative z-index for photos. Instead of that, use a positive or 0 index, and give the other elements a higher index. Also remember that in order for z-index to work the elements should have position: relative. I got photos to show up by having it z-index 1, having header z-index 2 and position relative.
You've had an answer, but thought I'd chip in a little to clear things up.
Z-indexing requires an element to be positioned, not necessarily relative or absolute as you've already figured out, but fixed is also an option.