Caaat1 Posted May 6, 2020 Share Posted May 6, 2020 (edited) Hi, everyone! Let me publish a little "discovery" based on a flip card w3cshools TryIt: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card As I apply one more wrapper to the flipcad front&back DIVs with no other changes, the result becomes inadequate in FireFox. All chromium-based browsers render it okay. Layout remains solid and its logic still intact. So why???!!! https://playcode.io/589103/ Many thanks! Edited May 6, 2020 by Caaat1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 6, 2020 Share Posted May 6, 2020 new wrapper has no height set, so it will wrap to content, flip elements have 100% height, but! they will fit height of new wrapper which is to height of content, not to height of flip-card-inner which is total height of flip-card elements. Remember you can only have one unique id within each page not multiple duplicates. Link to comment Share on other sites More sharing options...
Caaat1 Posted May 7, 2020 Author Share Posted May 7, 2020 (edited) Thnks a bunch! I got that... But it remains unclear why Chrome still displays it as before. I believe I have the cache disabled in all my browsers. 22 hours ago, Caaat1 said: Hi, everyone! Let me publish a little "discovery" based on a flip card w3cshools TryIt: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card As I apply one more wrapper to the flipcad front&back DIVs with no other changes, the result becomes inadequate in FireFox. All chromium-based browsers render it okay. Layout remains solid and its logic still intact. So why???!!! https://playcode.io/589103/ Greetings! Edited May 7, 2020 by Caaat1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 7, 2020 Share Posted May 7, 2020 (edited) Could be simple as one has a default fontsize, default margins for paragraph and header elements greater than the other, so the height of chrome wrapper happens to fill the full height available, and gives same as if it was given 100% height. Edited May 7, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
Caaat1 Posted May 7, 2020 Author Share Posted May 7, 2020 I'm discouraged, sir. I tried adding an explicit height to the wrappers, but the result's remaining the same -- lame display in FF and correct in Chrome. With or without fixed height. https://playcode.io/589103/ If you just try it with FF on your side to reassure I'm not breaking down for a stupid reason. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 8, 2020 Share Posted May 8, 2020 It does not work properly because you have added the wrapper within .flip-card-inner class element and in doing the styling affects the wrapper and not front and back class elements. So move it outside flip-card-inner container element, and give wrapper height: 100%; and width: 100%; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now