Personal Portfolio and Build a Cash Register projects - Unexpected outputs

JavaScript
1

Tell us what’s happening:

Hello all,

I have created a similar topic for a frontend project. Thought it is better to create another topic since they are not on/related to codepen. I have completed the personal portfolio and the cash register projects long time ago. For some time ago randomly looking at my projects I could notice that the preview/functionality of two of my project (the ones I mentioned above) is somehow not right. By chance I could find out that the <!DOCTYPE html> part causes the issues. And when I delete it, they are fixed. Really wondering what the root cause might be.

I have recorded videos of the issues and uploaded them on GDrive:

To inspect the source codes you can check here:

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Build a Cash Register Project - Build a Cash Register

2

<!DOCTYPE html> tells the browser to use the standards mode which is recommended to make sure that your webpage is the same across all browsers.

When you’re not using it, the browser will render the page in quirks mode which may cause issues in the layout as yours.

quirks mode tries to forgive you for any mistakes you make like this:

#input-container {
	width: 200px;
	margin: 0 auto 30 auto;
}
#purchase-btn {
  display: block;
  margin: 15 auto 0 auto;
  ...
}

You didn’t specify a unit to 30 and 15 like px or rem.
0 will work without a unit.

In quirks mode, it will assume that you mean px.
In standards mode, it will ignore the entire property and will be shown as deleted in your inspect or developer tools as it doesn’t know the unit you want.

If you added px for both 30 and 15 and used <!DOCTYPE html>, it will work.

The same issue of quirks mode and standards mode exists in your personal portfolio.

.social-links a:hover {
  padding-top: 0.5rem;
}

This creates padding and the height of the .social-links flex container will change accordingly.

In standards mode, it will handle this dynamically and align other links to be centered in the new height, that’s why they will move when you hover.

In quirks mode, it won’t handle flexbox reflows.
That’s why you think it’s working without <!DOCTYPE html>.

To make the link moves downward without affecting the layout in standards mode, you can use translateY() with transform property.

Read more about the difference between the two modes: MDN - Quirks Mode.

3 Likes
3

Wow…I really appreciate your detailed response Mr Elbadry :handshake:
Not only I could fix the issues, I also learned something very useful. Big thanks for your support!

2 Likes