0

I'm using Firefox and I have noticed a simple problem that when I'm using a image slider sometimes images overflow out of their container to the top. But it's only happening when I'm using Firefox on Chrome everything works fine, any ideas?

enter image description here

I have tried adding overflow:hidden, but it didn't help in this case.

Džiugas Bižokas
  • 13
  • 3

1 Answers1

0

If this is only happening on certain browsers it might be because you haven't done a reset on your CSS values.

You might want to check out this post and see if you're facing the same issues. If so you could add a reset.css file to your project to fix the problems. For more information, please check out CSS Reset.

Hoogland
  • 83
  • 8
  • damn this one is a nice catch bro, thanks!:) – Džiugas Bižokas Jan 17 '23 at 19:53
  • No worries, I've been there myself so I recognized the issue straight away. Good luck on the project! – Hoogland Jan 17 '23 at 19:54
  • one thing which I've noticed is that all my borders have now gone cuz of the reset.css :D I'm using tailwind and the basic fix of missing borders is using border-width or something like that, so I'll check on this – Džiugas Bižokas Jan 17 '23 at 21:24
  • Hmm, tailwind does have it by default, I've tried removing border: 0; from reset.css and test if it would work without it, but then I'm getting the same old result, so I need to find a way how to use it with tailwind or just create a simple workaround https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally – Džiugas Bižokas Jan 17 '23 at 21:28
  • It's hard to tell what's going wrong there exactly as I cannot see your code. But the way `reset.css` works is that it just resets the defaults. If you specify your CSS-classes correctly, you should still be able to add a border to elements. It says so in the documentation you linked too! – Hoogland Jan 17 '23 at 21:43