Hi i have applied position sticky on one of my element. I used following code:
position:sticky;
top:10px;
z-index: 1;
Also i have removed overflow hidden from parent classes. But still sticky position not working.
Any suggestion please.
Thanks
Are you on Safari.
Unfortunately position: sticky is not supported in Safari with some disparity in some Chrome versions i think.
I would recommend using the old way with position: fixed; and absolute positioning.
Related
I am working on a website: https://debifit.de and everything is fine on Chrome, FF and Edge.
But in IE11 it adds huge white space at the bottom and - if you remove overflow:hidden from the body tag - also to the right.
After hours of research I found that the element causing these issues is div#stickysmartphone, as long it has position: absolute. When ScrollMagic.js sets it to fixed, the white spaces disappear.
It is also positioned more to the right than in the other browsers.
#stickysmartphone {
position: absolute;
right: 20%;
top: 25em;
bottom: 10px;
}
Please help me fix these two problems as this animation is essential to the UX.
Thank you.
I figured it out: setting overflow: hidden on the inline svg element solved the issue. But I find it very weird that setting position:fixed on the containing div changed that. That's IE11 magic I guess.
I have tried to set CSS property to a DIV: position: sticky
But it doesn't work for IE11 and Edge15, does anyone familiar with any CSS pure polyfill that I can use in order to overcome this issue on those browsers?
Hi I am building a store on Volusion, and can't figure this problem out. The issue is that in IE, Chrome, Safari, my padding for search_refinement_filters is looking fine, but in Firefox, they are being pushed about 350 px to the right. Check out the Firefox CSS issue here
Please let me know if you can help! I have tried moving search_refinement_filters from the content div to content area, but unfortunately I wasn't able to configure that to work either.
Thanks!
It's due to the left padding and left margin on #search_refinement_filters. You also have some weirdness with the absolute positioning. You may want to add position: relative to #content.
Take a look at Firebug. It is a convenient tool for analyzing code in Firefox.
Just add following styles to your #search_refinement_filters div. Remove others.
#search_refinement_filters {
position: absolute;
top: 100px;
left: 232px;
width: 700px;
}
And then apply position: relative to your #content div.
#content {
position: relative;
}
As 2C-B said #search_refinement_filters has left padding and left margin. These can be removed or overridden to prevent the issue with the styling.
You should definitely get Firebug for Testing purposes if you don't already have it.
Get it here: https://getfirebug.com/
It is an invaluable tool for debugging html, css, and javascript problems.
Hope this helps.
I have a vertical scrolling website - It works fine in IE7 aside from a few margin issues and problems rendering some .PNGS - but I have one big problem;
I'm using two fixed positioned menus - one that slides out at an anchor point and one that just sticks to the bottom. Essentially - ones always at the top with the scroll and ones always at the bottom.
They stick, and work fine - problem is, I'm using z-index in the CSS and it seems IE7 is having some problems with it - with IE7 the sticky menus go behind the content. I read a suggestion trying to position it to 'relative'. But that would destroy the fixed.
Any suggestions? Thanks for anything -
Sub Question - of less importance, as I'm no longer carrying IE6 - but, is there a way to continue using these menus for IE6 - a way to work around it not reading position: fixed?
Here's an image to illustrate the problem better. http://tinypic.com/r/20fqqkp/7
Without any code it's tough to know for certain, but most likely the issue you are seeing is the z-index bug in IE.
Any element in IE6 or IE7 with position: relative set will generate a new stacking context. This means that the z-index of their elements not in the same stacking context won't necessarily stack as you'd expect.
For example, consider this HTML:
<div id="parent-1">
<div id="child-1"></div>
</div>
<div id="parent-2">
<div id="child-2"></div>
</div>
And this CSS:
/* Both parents create their own stacking context */
#parent-1, #parent-2 {
position: relative;
}
#child-1, #child-2 {
position: fixed;
}
/* Should be lower */
#child-1 {
z-index: 10;
}
/* Should be higher */
#child-2 {
z-index: 20;
}
According to the spec, #child-2 should always be stacked higher than #child-1 (and this is what you'll see in sane browsers). But since both parents have position: relative set, IE6-7 will have created 2 stacking contexts and might not do this for you.
The fix is to apply z-index to the elements creating the stacking contexts or to make sure all elements are in the same stacking context.
As for your IE6 problem, yes, you can emulate it with CSS expressions. Use the following in an IE6 only stylesheet:
/* Fixed to the top */
#top-fixed {
position: absolute;
top: expression(document.documentElement.scrollTop);
}
/* Fixed to the bottom */
#bottom-fixed {
position:absolute;
top:expression(
document.documentElement.scrollTop +
document.documentElement.clientHeight -
this.clientHeight
);
}
Try the zindex fix http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
Can someone please help me with this problem i am having with my menu ?
THe problem is only in IE in compatibility mode. I have the menu with position absolute and z-index 99999999 but still the menu is hidden behond the content.
Please check :
http://www.tomasdostal.com/projects/modul16/draft2/?page=buildings
Thanks for any advice
I have the menu with position absolute and z-index 99999999
You need to use an even higher z-index!
..just kidding.
IE in compatibility mode = IE7.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, one way to fix it is to add z-index: 1 to the <div class="grid_3"> that is a parent of your menu.
Z-index only works with absolute positioning (the element is currently positioned relative to it's parent element). Add the following CSS to .menu_wrap.
position: absolute;
top: 0;
left 0;