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;
}
Related
I've tried for a long time to get this to fix. The big text navigation is at the top in IE11/10/9, but all other browsers have it placed lower. When you hover over the other nav, IE will push it down in the proper spot.
here is the demo site:
https://xdvn.000webhostapp.com/
Hmmm....it seems like adding the height to your secondary nav fixed the issue in IE.
#secondary_nav {
text-align: right;
position: relative;
height: 77px;
}
I am still trying to wrap my head around it to know why exactly this is happening. It seems like IE doesn't know where the bottom will be for that absolute element until that link is hovered over. So set height for the first nav element will make it behave right.
I am experiencing elements position misbehaviour into my page, in IE(11) only; live link here. The logotext, the menu and the left sidebar text, remain in place doesn't move with the wrapper when the left slider is open (clicking on info+ button). I've read about position: fixed + transition in IE problems.
I've tried to apply position: expression(fixed); to the header but something went wrong and the wrapper receive a brake-movement at open/closing slider. (The sidebar didn't work with position: expression(fixed);)
Also I've tried to tweak the css modifying the element position values in static/ absolute but without succees.Tests are made in full screen, the theme is not for mobile screens.Any thoughts?
LE: I've found a possible solution that works with the slider in IE11:
.header {
position: absolute;
}
.bar-side {
position: absolute;
}
Will work with the slider but also will move on vertical scroll.If I ca fix that somehow, could be a solution.
This may be way too late, but I had a similar issue with position:fixed and IE11, for a full page DIV (by specifying top: 0; bottom: 0; left: 0; right: 0;). Worked fine on Chrome, Edge, Firefox and Opera, but IE11 displayed the DIV at way under the full viewport size, and with rounded corners that seem to have inherited somehow from the parent.
Playing with the IE11 developer tools, I found an alternate option suggested as a parameter for position - "-ms-page". Using position: -ms-page sorted the issue; preceding this with position: fixed allowed the other browsers to carry on regardless.
Hope this helps others with a similar problem...
For a quick solution add transform separately for IE, in IE only css hack.
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.header, #bar-left{
left: 0;
transition: all .5s;
}
.shiftnav-open .header, .shiftnav-open #bar-left{
left:590px;
}
}
Move the header outside the .shiftnav-wrap and place it above it, and apply the translateX seperately for header movement.
.shiftnav-open header{
transform: translateX(590px);
}
It is not good idea to depend on its movement relative to the outer div.
elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element - http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
Another solution, you can use the header as absolute positioned, inside the left div #shiftnav-info.
ADD this script in your page. IE fixed position scroll issue fixed.
<script>
if(navigator.userAgent.match(/Trident\/7\./)) {
document.body.addEventListener("mousewheel", function() {
event.preventDefault();
var weelDelta = event.wheelDelta;
var currentOffset = window.pageYOffset;
window.scrollTo(0, currentOffset - weelDelta);
});
}
</script>
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 am working on a site and I have to align the bottom of the right box (Affiliation) with the bottom of the right box (Contact Us).
The problem is, I can make it work in Chrome, IE and Mozilla and even Safari on Windows, but NOT when it is Safari on Mac. I don't have Mac but I am using Adobe BrowserLab to see how it is (and the client says it doesn't work :P)
I've tried several codes / CSS including #media but still no luck (if you see the code / layout is changing then it may be me working on it).
Both the markup and CSS is simple and standard one, just need help to make it work in major browsers, Chrome, Firefox, (modern)IE, and Safari on Mac.
Current code:
#bottom-aff{
display:inline;
height: 145px !important;
}
but as I said, I am working on it.
Please help, thanks.
Definitely not the most elegant solution, but it seems to work:
#contentleft {
position: absolute;
top: 0;
bottom: 0;
}
.postarea {
position: absolute;
top: 0;
bottom: 10px;
left: 0;
right: 0;
}
It basically lets the right sidebar decide the height of #content, and then forces the left content to expand to fill the remaining space. Content might get cut off if the left column is taller than the right sidebar.
Please try to use max-height,min-height property.
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.