css requires "px" on different host?

Issue

Similar to this: When/Why Do CSS Property Values Need to Specify "px"?

but I'm getting the error for the same property on different websites.

I've copied my website to a different host, from Dreamhost to Siteground. The site on Dreamhost is still running, let's call it site1, and uses a subdomain, site1.example.com. The second site on Siteground is site2, and uses a different subdomain of the parent domain, site2.example.com.

I've copied all the files across from site1 to site2, and verified it's working ok. However, I've noticed a really odd quirk: The CSS on the new site breaks when dimensions are specified without a unit, such as padding: 10 0; rather than padding: 10px 0px;

So both websites are running simultaneously in the same browser, I've just cleared cache and cookies etc. When I load them, the new site2 on the left breaks, and the old site1 on the right is still good.

Have checked both site1 and site2 in different browsers too, just to be sure.

On hover, it just says that it's an "invalid property value"

in Developer tools, as soon as I add "px" to each property, it works fine.

I'd like to understand why this is happening - I'm not keen on going through the whole CSS and adding units to everything. I don't know of any way to set CSS to require explicit but it feels like this sort of behaviour!

Solution

The working website actually uses incorrect document type:

<!DOCTYPE php>

The browser will not understand this doctype and switch to quirks mode instead of standards mode.

Your CSS is also broken, it uses invalid values for margin and padding (0 0 10 0 and 10 0 10). In quirks mode however, these unitless lengths are treated as if they are px values and your website with broken CSS actually works with broken doctype.

You need to fix both... the DOCTYPE and the CSS.

Answered By - Salman A