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.
Related
I am using fixed positions elements along side the css property clip to make a cool scrolling / paging effect.
This all works great but my issue is that I cannot click my links.
I can see that the fixed elements are overlaying each other which is causing the issue but I cannot figure out how to fix it.
I have tried changing z-index values on the containers and the anchor tag with no luck.
Here is a fiddle: http://jsfiddle.net/9ukyrbc0/
If anyone can help that would be amazing!
Cheers!
The problem is within .fixed-container:
.fixed-container {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: none; <-----
}
pointer-events: none;
Pointer Events are not triggered at all within that container ... thus links are not active.
more on this here ...
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
So I have figured it out, but I cannot really explain it.
The first thing to do is to remove pointer-events: none so thanks to #manhatmanich for spotting that one.
This makes the first link clickable but not the rest, it looks like a z-index issue but changing the z-index values does not work.
So while playing around I tried removing the position absolute from the anchor tag and BOOM, all links clickable.
You can see a fiddle here: http://jsfiddle.net/9ukyrbc0/10/
I honestly don't understand how this fixes the problem but it does!
I was having the same issue, the code given here without the pointer-events: none; worked for me. The only issue is that I also had links in my fixed position element and now those links don't work.
For me it was a floating action button with poistion-fixed bootstrap class added that did not work. It worked by just adding z-index:1 to its styles.
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.
Can someone help me trouble shoot this nav in IE7? It jams right and I can't figure this darn problem out. http://brccycling.com/2011/
Thanks,
The easiest way to fix this is to redo how you're placing the menu to a technique which will work between IE7/8 and other browsers such as Firefox:
On #top, add position: relative.
On #nav:
Remove float: left, because it's unneeded.
Remove the margin rule.
To replace what the margin was doing, add top: 260px, and left: 290px.
The technique we're now using (properly) is detailed here:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I have a DIV that must always stay on bottom/left of the page, something like a footer menu.
div#bottom_menu
{
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 90%;
}
My page has min-height defined and when the user shrinks it below that it gets scroll bars.
The problem is when it happens, in IE8 the div moves up to match the new viewpoint lowest point like it would behave if it were with position: fixed. Worse than that, when you scroll down again the element does not move down (like in position: fixed) but ridiculously stays in the middle of the page. This works perfectly in Firefox, Opera and Chrome. Is that a known IE bug and how to work around it?
Great, I got Tumbleweed badge for super unpopular question.
While waiting someone to help me here I solved it myself (as usual). I did it by putting bottom_menu in a wrapper div pretty similar to the old container, only difference is that is has no overflow: hidden; and is not directly inside the body. That fixed it by some strange reason. Maybe it will help somebody.
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.