I have images that are on the left and right that are to become sticky while scrolling.
I am using position:-webkit-sticky; position:sticky; for the class stuck. It is working fine on Chrome and Firefox, but not Safari.
I don't have any overflow:auto or display:flex that would be affecting it. I have seen other demos where position: -webkit:sticky works on Safari. I just can't figure out why it isn't working on my page
Here is the page, you have to scroll down to the Celebration section to see it.
https://www.kingswaychurch.org/annual-report/
Thanks!
I figure it out. There was a div above it in the code that wasn't floated. On one side it was floated, which worked, and the other side it wasn't, which didn't work. I think sticky position was relaying on the closest div.
That is my best guess.
Related
im facing an issue with position sticky on direction RTL html, I have a table in which the first td of the thead and tbody have position sticky with right: 0;, on scroll x, the table parent container has overflow-x: scroll; overflow-y: auto; white-space: nowrap;!! everything works fine even on chrome dev tools, firefox, and also codepen its working, but when I open the same thing on my iphone the position sticky is stuck to the left, like this, enter image description here but the left side looks like this, enter image description here, also when the scroll x-direction happens the sticky elements diasporas and comes back non stop, anyone knows why?
thank you.
codepen - https://codepen.io/shammlo/pen/rNMeZNe?editors=1100
Safari (on all platforms) has always glitched when using position:sticky with right or left in RTL reading direction. I am not aware of any open WebKit bug for this or any plan to address the issue. I suggest you open a WebKit bug, and for the foreseeable future, not use sticky in this way for RTL direction.
I am trying to figure out what keeps throwing off the positioning of my navigation menu on a site I'm working on. I have added an image just below my menu to accentuate it, which displays perfectly in Chrome.... however the div expands and locates itself below the logo in Firefox and IE. I've tried and tried and just can't seem to figure it out. If I eliminate the image it works perfectly, but with it... not so much.
Example: http://espritduvin.ca/ (View in different browsers to witness my issue)
Give your floating containers a width, e.g. 320px for the left container, 633 for the right one.
Try giving the image float:right, at the moment it's not given any css at all.
Firefox is rendering a clear on the header-right-section. Change the style for both left (logo) and right sections (nav bar) of the header to display: inline-block.
And I would suggest using Bootstrap for CSS in the future.
try to put proper width to header-right-section, i think it will work. Right now there is only float value.
If you are using bootstrap, you can put this right and left in 2 columns.
Okay so while testing a site in various browsers everything worked flawlessly except for internet explorer 7. My problem is pretty weird one: my menu elements won't stand still. What I mean by that is that when I scroll the screen down my menu elements travel with me but only the link parts of them (all background stuff remains at the top) and when I scroll back up the menu elements are nowhere to be seen. Is this a known bug in IE7?
I have some suspicions that the problem might lie in position attribute in css as I use position:relative and left/right:50% to center my menu elements.
Found an answer myself. Here it is for those who someday struggle with the same thing.
The culprit was as suspected position. For some reason the relative positioned elements were treated as fixed or somehow seperated from the page layout so it "hovered" over everything while scrolling. To remedy this is one should set the position of the container/wrapper of the page to relative. So here it is in code:
#container{position: relative}
Huge thanks for all comments for prodding me in the right direction.
I am having a problem with IE. The url to my site is www.trecall.com. I want to put a margin on the left side of the animated menu, to make the menu centered on the page. This works fine in FF, but in IE, the margin does not show up.
Any idea why?
THANK YOU!!
You can try wrapping it in another div and using padding on that. IE is not very good with margins.
Playing with left margin is not the correct way to do horizontal centering, it'll only work on your own display resolution..
see this for horizontal centering in css (old but still correct)
I have navigation bar in my website that makes the links work properly everywhere. But when on Safari, for some reason the links are not clickable unless you highlight the empty space above the option. I diagnosed it further to find that I was adding a negative margin-top for the searchbox to align it properly with the options, when I removed that margin-top, the links were clickable. Any ideas?
You could use a z-index and position:absolute to make sure your navigation Div is on top. thats more than likely what the problem is.
Try that... add
z-index:100px;
position:absolute;
to your navigation in css.