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.
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 got this code: http://kod.djpw.cz/xodb-
And the fixed element bounces up and down on scrolling. This actually happens only in IE.
I need to have that blurred background but I guess it makes no difference in this case.
Bouncing stops when I remove: margin: 0px; from body
Actually I would rather have margin specified like this: *{margin: 0px;} if its possible.
But I really need it to be there, otherwise it actually makes margin on top and left side.
Anyone any ideas?
Set that element z-index to 99 and try if it works....
e.g:
box{ position: fixed; z-index: 99; }
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'm trying to position a check-mark next to a menu item by doing the following:
#userInfo div.dropDownContent p span
{
position: absolute;
margin-left: -20px;
}
A span inside a paragraph is absolutely positioned in order to preserve the centering of the menu item's text, otherwise the check-mark is centered along with the text and it makes it look bad.
As you can see in this jsFiddle, the check-mark looks ok in your average Windows browser, but Safari on Mac and iPad (perhaps even Chrome on Mac) shows the check-mark outside the menu, and there's nothing I can do to make it move even a pixel.
Does anyone know what I'm doing wrong? Is it a webkit bug? Thanks.
I do see that odd behavior in Safari, and I really can't explain why it's in that browser only.
That being said, this updated fiddle should show you what worked for me.
Basically, instead of positioning the span absolutely, I used relative positioning and set it to left -20px like so:
#userInfo div.dropDownContent p span
{
position: relative;
left: -20px;
}
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.