I have a popup panel which shows nice on chrome and FF like this:
It's a grey iframe with this css style:
element.style {
z-index: 25000;
opacity: 0.5;
position: absolute;
background-color: black;
border-width: 0px;
top: 0px;
left: 0px;
width: 1366px;
height: 361px;
visibility: visible;
}
which contains a DIV:
element.style {
position: absolute;
z-index: 25001;
background-color: transparent;
left: 0px;
top: 0px;
width: 1366px;
height: 361px;
}
which contains another (main) white div:
element.style {
width: 400px;
overflow-y: auto;
overflow-x: hidden;
z-index: 25002;
visibility: visible;
position: absolute;
left: 483px;
top: 77px;
}
I do not understand why on IE 8 the panel with those tabs is white also, so basically it should be in the background like on Chrome...:
Do you have any clue?
I'm almost sure the problem is on the panel with the tabs and not on the popup one...
The css of the panel with the tabs is:
element.style {
width: 280px;
height: 500px;
position: relative;
}
UPDATE:
Panel tab is actually a table with the above style.
Ps: Do not blame me about css for the popup. Is mainly generated by the icefaces component.
Finally, solved...
Added this style to the div which contains the panel tab:
position: relative;
z-index:-2;
Please note that I've tried with z-index:0 or positive but was not working so a negative one was required...
The single drawback for this solution is that now, the parent div with its panel tab does not appear on Firefox.
Grr... I really hate IE.
UPDATE: I ended up using jQuery to put to that div, a negative z-index only for IE.
Related
Issues I have had
I have not been able to scroll down on my site.
No solutions I ave found work.
Info
My site is execlinux.glitch.me
The CSS files and HTML can be found by going to glitch.com and searching execlinux
I found the solution:
in your CSS file you have a ".text" element which has the fixed position property. It's wrong!!! it should have the relative position like the below:
.text {
position: relative;
top: 100px;
left: 50px;
}
the css below is incorrect:
.text {
position: fixed;
top: 100px;
left: 50px;
}
You could try changing fixed to relative, however if you do there will be other issues you will face.
If you use the following css:
.text {
position: relative;
top: 100px;
left: 50px;
}
you will find that the contents of your <div class="text"> scrolls over the top of your navigation menu and is not left justified.
Perhaps try
.text {
position: relative;
top: 100px;
left: 50px;
z-index-1;
width: 90%;
}
html {
height: 100%;
width: 100%;
overflow: visible;
}
Tested these changes and while not perfect, they achieve a somewhat satisfactory result.
I have been struggling with this for hours. I have a series of problems related with z-index, position:fixed in IE11. I have tried -ms-device-fixed but nothings seems to resolve this really weird issue. Part of the dropdown is not visible like you can see on the image.
.ms-webpart-zone.ms-fullWidth .ms-webpartzone-cell {
display: block;
overflow-x: auto;
overflow-y: visible;
min-height: 220px;
position: relative;
z-index: 10;
}
Dropdown CSS:
position:-ms-device-fixed!important;
z-index:20;
top: 10px;
position: fixed;
visibility: visible;
left: 88px;
width: 226px;
Try using position: expression(fixed);
Try using position: relative; on the parent element and position: absolute; on your caption. This is cross-browser.
This might have been answered but I am really struggling to describe this issue.
On my website I have map div, a transparent slider div on top and non transparent info div below the transparent slider.
<div id="map"></div>
<div id="spacer"></div>
<div class="info"></div>
The css allows the info div to be slid over the map.
html {
overflow: hidden;
height: 100%;
}
body {
overflow: auto;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
}
#map {
position: fixed;
width: 100%;
height: 90%;
}
#spacer {
width: 100%;
height: 90%;
}
.info {
z-index: 999;
position: absolute;
background-color: white;
width: 100%;
min-height: 100px;
box-shadow: 0px 0px 10px slategrey;
}
Here is a picture of the undesired effect.
It shouldn't be possible to pull the sliding div away from the bottom of the browser.
Is there a html & css solution?
I think what you are looking at here is a browser drawback, which can be overriden in safari under ios by using a non-standard webkit rule called -webkit-overflow-scrolling , you can find information about it here on MDN. I have ran into this issue numerous times in the past, but I can't remember finding a fix for it.
You can try this simple "hack" to bypass it, but I don't think this is a good idea though:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
You can find more information about this issue here.
I'm having a hard time getting right stacking order. Is there a physical way to render this right (.above-mask being, well, above mask, while .below-mask stays below) without changing html?
EDIT: Removing z-index on .below-mask is, unfortunately, also impossible.
HTML:
<div class="mask"></div>
<div class="below-mask">
<div class="above-mask"></div>
</div>
CSS:
.mask{
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: rgba(0,0,0,0.3);
z-index: 10;
}
.below-mask{
position: absolute;
width: 15em;
height: 15em;
background: blue;
z-index: 1;
}
.above-mask{
position: absolute;
width: 10em; height: 10em;
top: 2.5em; left: 2.5em;
background: yellow;
z-index: 100;
}
codepen: http://codepen.io/anon/pen/WrXbaL
EDIT: How it looks now - I'm making a first-steps view. I wanted elements that need to be explained to be above the mask (here it would be the search panel), while everything else stays neatly hidden below.
Okay, I'm stupid. I don't need a mask, I can just use eiter a huge box shadow or an outline:
outline: 1000em solid rgba(0,0,0,0.3);
It does the trick.
http://codepen.io/anon/pen/eJeNVg
I have a div that when you mouseover has a child div appear to display information. The basic code is as follows:
HTML
<div id="container">
<div id="hidden_div">
<iframe></iframe>
</div>
</div>
CSS
#container {
position: absolute;
height: 20px;
width: 40px;
top: 8px;
left: 30px;
}
#hidden_div {
position: absolute;
background: url(../_images/inside_btn_back.png) repeat;
height: 60px;
width: 350px;
top: 0px;
left: 0px;
margin-top: 20px;
z-index: 50;
display: none;
border: 1px solid #a08f89;
}
#container:hover #hidden_div, #container.over #hidden_div, #container:focus #hidden_div {
display: block;
}
This works in all browsers except IE(specifically IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. don't know why its not working with the div. Here is a link to the live page here. The mouse over div is the facebook like button near the bottom of the page.
it's the page loaded in the iframe not having a transparent background which causes the hover to fail in IE.