Jump to content
Caaat1

Weird behaviour of a slightly modified w3schools sample

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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%;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...