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.
Related
Code pen showcasing problem.
https://s.codepen.io/NoMan2000/debug/rdPEYJ/xnrabdnqJadA
I apologize for the rather gnarly HTML, but this is output from a next.js project so the bloated mess is part and parcel of that.
Anyway, the problem can be seen in the element #header-menu-buttonList. The idea is pretty simple, a menu that goes underneath the main grid element. But for whatever reason, it just sits there on the page.
You can pick it up in the debug tools and see that it has a width and a height. Messing with its z-index doesn't make the object visible, only removing the position: absolute makes it visible on the page, but that opens up a whole host of other issues.
So, anyone know:
1.) Why the heck it's doing that?
2.) How to either fix it or work around it?
Thanks for the rubber-ducking. :)
So the issue is that the parent element is positioned absolutely, and the child element is positioned absolutely. I'm not up to snuff on all my CSS rules, but this appears to keep it in the DOM but not render it visible.
The solution is to set the child #header-menu-buttonList to position: static and the parent #header-menu-button to position:absolute.
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;
}
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
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.
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.