I have the following website: http://dev.driz.co.uk/phase/about.php
If you view the website in IE7 you will see that the drop-down menu in the top left does not appear above the main content area. This is because of the stupid IE7 z-index bug, however the normal fix of making the parent element have a high index to make it fix the child would not work in this instance as I need the parent header to sit under the main content...
Any ideas on how to fix this based on the layout structure I have? I've tried most of the IE fixes on the net, including a jquery solution that resets the z-indexes in a loop, but none of them have solved the problem.
You need to give your header a z-index less than your nav element.
IE7 is a pain with z-index, you need to habe a structure like this.
Header - z-index:2
Content - z-index:3
Nav - z-index:4
Along those lines, sorry I can't be more help.
I've found that when having problems with z-index in IE, that setting the elements you want to be affected by the z-index to have a relative position.
i.e.
#block {
z-index: 1;
position: relative;
}
Related
weird bug here. Searched on the internet for hours but no working solutions yet :(
https://www.*****.*****/
It only happens on the page with parallax, a page without parallax is fine (biografie page).
What happens is that when you look closely, you will see that the white transparant-ish header flows OVER your scrollbar.
When taking a closer look you will see that the whole body is floating over my scrollbar.
Does anyone know a way to 100% fix this? I tried lots and lots of answers on the internet but none gave me a working solution.
Hope someone can explain to me what is happening and how to solve it.
Best regards
You can't place the menu below the scrollbar, because the scrollbar on pages with .parallax containers is not the <body>'s scrollbar, but .parallax's scrollbar.
And you can't place element A between element B and element B's scrollbar, unless element A is a descendant of element B.
However, the real problem is not placing the menu under the scrollbar. The real problem is being able to use the scrollbar (click its top arrow) through the menu, where they overlap.
Which is quite possible, using:
.menu {
pointer-events: none;
}
.menu-wrapper > * {
pointer-events: all;
}
(This makes the menu transparent to pointer events, except for children of .menu-wrapper, which do not overlap the scrollbar).
Recently I am working on a new website and I am creating it with bootstrap. Here is the bootply link that have my website.
http://www.bootply.com/9pUX4JwEYb
According to that HTML in this Link, I have a trouble that i cant fix yet. When I am scrolling up, the text "Main Bodysssss..." is going over the navigation bar. I have tried to position it but no help. Just tell me how to fix this. Many Thanks.
A higher z-index for .navbar should fix this (working example):
.navbar {
z-index: 10;
}
From the documentation,
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
Please see the screenshot below. I have a jQuery menu and an iframe that loads a PDF document. In Chrome and Firefox this works perfectly and the menu appears over the top of the iframe. I have a z-index: 2 on the menu and a z-index: -1 on the iframe.
Any ideas of how to fix this in IE?
EDIT: jsFiddle
http://jsfiddle.net/hkA2v/1/
Try adding position:relative; on iframe.
iframe{
position: relative;
}
Not directly related to this specific issue.
But people, who are struggling with z-index similar issues in IE9 might consider adding a transparent background in some cases.
Because in IE the element with a link must have a background in order to be click-able. Otherwise the mouse ‘sees right through it’.
background: url(transparent.gif);
Source: Forum Post
Make sure all elements with z-index are siblings of the same parent. If you start nesting elements inside elements and apply new z-index properties to those children, the z-index will start from the parent's z-index, not any z-index properties set before the parent.
IE is very picky with z-index.
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
I'm having a problem with a dropdown menu under IE (6 and 7).
http://www.amaconsulting.pl/promocje.html
As you can see, the dropdown hides behind the main content area in IE.
It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI
I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hides behind the main content divs (either .primary or .main, .secondary is fine).
The z-indexes for these divs are set in a separate stylesheet, ie.css, in case someone'll be looking for them.
If someone could provide some advice, I'd be very grateful.
Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome
Solution
The HTML
<div id="container_page" class="container_page">
<div id="container_header" class="container_header">
NAV BAR GOES HERE
</div>
<div id="container_body" class="container_body">
...body text...
</div>
</div>
The CSS
#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}
why it works
You have to tell IE how the two divs relate to one another.
In IE if an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.
So I think that you need to give your ul.nav a z-index of 1. I actually wrote about this on my blog.
Updated:
So if I change the visibility style of the hidden ul to visible it appears above the div as it should as long as ul.nav has a positive z-index value. Therefore, I think that this has something to do with the way your JS renders the dropdown menu from that hidden UL. Unless I have all your HTML/CSS/JS I can't really solve this so I can only point you in the right direction and I think that understanding this page will help you a lot.
I managed a z-index work around here on a submenu - Chkredit - swiss credit website
Works in all versions of IE and is light and 100% CSS (no javascript).
IE does not use z-index correctly.
Check the z-index's in the CSS code of the website. You will need to put a z-index -1 on the items your menu is hiding behind.
I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery. When I sort this one out, I will post the full solution here.