Jump to content

Weird behaviour of a slightly modified w3schools sample


Caaat1
 Share

Recommended Posts

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 by Caaat1
Link to comment
Share on other sites

  • Caaat1 changed the title to Wple.eird behaviour on a slightly modified w3schools "TryIt" sam

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

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 by Caaat1
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...