html - Arrows not compatible when testing in FireFox

Question

I have an issue that is browser compatibility related: I'm building a portfolio website and use arrows down and up on every page. These arrows work as a link (a href) and take you to the next page when you click on it. While building this, I tested it in my localhost, which I use Chrome for. The arrows behave how I wanted (they jump up and down) and have the position on the page I wanted, which is 60 px from the bottom. However, when I test my project in another browser, like Firefox, these arrows take the wrong position on the page (way much further down). Does one of you can tell me what's going wrong here? I have no idea how to fix this. Important to know is that I designed my arrow myself with css-borders and rotation. Look at the code below (HTML, and CSS).

[CSS code and design of the arrow]

My Images

• CSS code to make the arrow jump and down
• CSS code and design for the arrow
• HTML code for the scroll button/arrow

Answer 1

when using position: absolute you must make parent relative. In your case you added position:absolute; to .scroll-btn so you must add position: relative to it's parent. here is <a href="#about">.

NOTE: if still difference in multiple browser, add display:block,/*inline-block*/ to tag <a> because default <a> display is inline and if you add display to tag, browser understood, and if you don't add display to your absolute tags, each browser make it by default values of it and show wrong.