Browser Incompatibility

For some reason, my design doesn’t render as well on Firefox as it does on Chrome and Safari. On Firefox, the banner video embed starts a third of the way off from the left. Here is my project link: https://preview.webflow.com/preview/cp-alpha?preview=81f7ae4c6b66921d1587f8b8acdb9e36. I’ve also uploaded a screenshot of what’s rendering on Firefox:

Hi @InfoTS ! Thanks for the question. It looks like Firefox does not like the display inline block style set on the Banner Image Screen class.

I would try setting that to Display Block and see if that helps:

Thanks for the suggestion. By setting the Banner Image Screen to block, it renders the banner below the navbar – as opposed to beneath the navbar, which was an effect I’m hopping to achieve. How come setting it to inline block renders well for Chrome, Internet Explorer and Safari?

Hi @InfoTS, I think it is just something in that style that Firefox is rendering differently. If you want the banner below the navbar, another option is to set the navbar to position fixed with a higher z-index than the banner.

Let me know if you would like me to take another look :slight_smile: I am happy to help!

Thanks for following up! So I have a scrolling navbar and one that’s static; they’re set at 9999 and 1000 respectively in the z-index. The banner is at auto, which is at 0. On my end, it doesn’t seem to make a difference. Maybe I’m missing something else?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.