Running in compatibility mode the calendar below renders behind the textboxes below. IE8 displays the calendar how I need it to.
My CSS
.MyCalendar .ajax__calendar_container
{
border:1px solid #7F9DB9;
background-color: #ffffff;
z-index : 1004 ;
width:190px;
}
the textboxes which are overlaying the calendar don't have their z-index set anywhere although I have tried in my server side code to set their z-index to -1 if I detect IE7 to no avail. Any suggestions?
IE has problems with z-index. Most browsers treat the page as one continuous stacking context, but in IE, positioned elements generate a new stacking context, starting with a z-index value of 0.
As mentioned in this article:
http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/
try giving the calendar's parent element an even higher z-index.
I finally got it on top with an additional transparent background image. IE8. SASS:
#galerie-link {
position: absolute;
z-index: 1000;
top: 25px;
left: 40px;
a {
display: block;
width: 185px;
height: 90px;
background-image: url(../images/transparent.png);
}
}
Related
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
I'm developing a help system for a site where they want the page to turn opaque when activated except for the DIVs you can receive help on.
The problem is I can't figure out how to get specific divs to "appear" transparent on top of an opaque background.
I tried setting the z-index of the divs to a value higher than the background but that doesnt seem to work.
Here is a JSBin illustrating the issue. Anything with the "help" class should appear to be transparent (i.e. not opaque)
http://jsbin.com/ifohuc/1/edit
Thanks.
You must set the position attribute of li.help in the css file
for example
position:relative;
Change #bgDiv to z-index= -1
http://jsbin.com/ifohuc/2/
#bgDiv {
width: 100%;
height: 100px;
min-height: 100%;
background-color: #999999;
position: absolute;
left: 0px;
top: 0px;
opacity: 0.85;
z-index: -1;
}
I have an issue with two different browsers. I have attached snapshots of issues:
When I use the following css I get image1:
.support-data-text img, .support-data-text select {
float:left
}
/* this is for dropdown list */
form#saveSupport select {
height: 29px;
width: 234px;
position: absolute;
}
form#saveSupport input{float: left; width: 243px;}
/* this is for the img we are using for dropdown list */
form#saveSupport .select_game { background: url(../images/select-status.png) no-repeat;
width: 223px; position: absolute; height: 29px; line-height:29px;
padding: 0 0 0 10px; color: #333; font-size:12px; overflow: hidden;
}
and when i add margin-left: 18% to form#saveSupport .select_game Chrome shows proper alignment of dropdown list image but not the actual dropdown list whereas Firefox displace the drodown list to right side. (Image2)
Kindly help me with the solution. I would be thankful!
Thanks,
Vikram
Hi I think you set position:relative to parent element and for child element set position:relative
I think your Parent Div is this
.support-data-text{
position:relative;
}
and now set to child div absolute position and set to left right top bottom according to your design .
Some of the CSS properties acts differently in both Chrome and Firefox.To fix this I used the below solution which worked for me. Add the CSS properties which acts differently in chrome and firefox inside class(same class name which use for chrome css prop as well) which should come under #supports (-moz-appearance:meterbar). The properties which we add within #supports (-moz-appearance:meterbar) will be taken only for Firefox browser.
Example:
#supports (-moz-appearance:meterbar) {
.yourclassname {
margin-bottom: 10px;
bottom: 2px;
}
}
I am drawing a pointed triangle at the bottom of the div using :after pseudo-element. It works as designed. However, when I add the opacity filter for the div, it stops working in IE (I am testing it on IE8). It works just fine in FF, Chrome, and Safari.
Here is HTML:
<html>
<head></head>
<body>
<div id="demo"></div>
</body>
</html>
Here is CSS:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 10px;
}
Run it in IE and see the result that looks like image here: link text
Now add IE opacity filter: to the #demo so it looks like this and run it in IE again:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
filter: alpha(opacity=50);
}
Notice that opacity filter works but the triangle at the bottom of the div disappeared.
The same thing works just fine in every other browser (the only difference is that you need to use "opacity: 0.5" instead of IE specific "filter: alpha(opacity=50);")
Does anybody know why this is happening, and how to get around it?
Thanks.
An object must have layout for the filter to render. Pseudoelement :after don't have layout. Sorry to say that.
The problem is that IE Visual Filters (like the alpha one you are using) were developed before :after and :before were implemented in IE.
You should wrap the #demo div with another div container, and put the opacity on that (making sure the container div has layout).
Alas, it is the only way to do ti
Is there anyway for an absolute positioned child to expand to fill its relative positioned parent? (The height of parent is not fixed)
Here is what i did and it is working fine with Firefox and IE7 but not IE6. :(
<div id="parent">
<div id="child1"></div>
</div>
#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }
That's easy. The trick is setting top: 0px and bottom: 0px at the same time
Here's the working code
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: block;
background-color: #ff0;
border: 1px solid #f00;
position: relative;
width: 200px;
height: 100%;
}
#child1 {
background-color: #f00;
display: block;
border: 1px solid #ff0;
position: absolute;
left: 200px;
top: 0px;
bottom: 0px;
}
Check out a working example here http://jsfiddle.net/Qexhh/
If I remember correctly there is a bug with how IE6 handles div height. It will only create the div to the height needed to contain the content within it when height is set to 100%. I would recommend two approaches:
Don't worry about supporting IE6 as it is a dead browser anyway
If that doesn't work, use something like jQuery to get the height of the parent div and then set the child div to that height.
fake it by setting the backgrounds to be the same colour so no-one notices the difference
You can achieve this with setting both the top and bottom attributes of the child.
See how this is done
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet!
Dean Edwars' IE7 and 8 JS libraries
As far as I know, there is no way of expanding a parent element around an absolutely positioned child element. By making the child element absolutely positioned your are removing it from the regular flow of page items.
I recently built a 2-column website where the right column was absolutely positioned but the left column was not. If the left column had less content and a smaller height than the right column, the page would cut off the right column since it was absolutely positioned.
In order to resolve this, I had to determine if the height of the right column was greater than the height of the left column and if so set the height of the parent div height to the greater of the two.
Here is my jQuery solution. I'm not much of a coder so feel free to tweak this:
jQuery(function(){
var rightColHeight = jQuery('div.right_column').height();
var leftColHeight = jQuery('div.left_column').height();
if (rightColHeight > leftColHeight){
jQuery('.content_wrap').height(rightColHeight+'px');
}
});