Style goes broke on adding doctype_问答_开发者

开发者 https://www.devze.com 2023-04-11 12:14 出处：网络

I\'m working on a website that uses PHP (with Savant templating for MVC) on the backend and HTML4 and CSS3 on the front end. I\'ve used some font-embedding and transparency. The doctype I\'m using for

相关专题：css doctype

I'm working on a website that uses PHP (with Savant templating for MVC) on the backend and HTML4 and CSS3 on the front end. I've used some font-embedding and transparency. The doctype I'm using for the site is as follows:

开发者_开发技巧<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But then, here's what happens. Hell breaks loose. My font size diminished to around 1em everywhere and the padding turns 0px. I don't understand why this happens.

Further, as I've embedded two fonts, one of them works fine with size and style but the other font is totally lost on IE. It shows up in Times New Roman with a 1m font-size.

If anyone knows the solution to this, I kindly request you to help me with the same. Thanks. :)

If I understand you right, you added the doctype after you did all your css coding.

If that's right, then it was a bad idea in the first place to not include a doctype. The doctype definition insures that the browser does not render in quirks mode. In quirks mode every browser applies completely different default style rules and has a quite different rendering behavior.

Applying a doctype and let the browser use standard mode is good practice, because it reduces the differences between browsers - there are still more left, than you would like to cope with on a daily basis.

Browsers have multiple rendering modes with two key ones (Standards and Quirks) being triggered by the Doctype (the assumption being that authors who use certain Doctypes know what they are doing and authors who use others, or no Doctype, do not).

The Doctype you have added triggers Standards mode in which browsers are:

More consistent with the specification
More consistent with each other (as a consequence of the above)
Less tolerant of errors (ditto).

Make sure your HTML and CSS are both valid, and that you are using them correctly.

A page without a doctype will render in Quirks mode, while a page with a doctype will render in Standards mode (well, assuming the doctype itself is correct, and nothing else on the page is triggering Quirks mode).

It sounds to me like adding the doctype is switching the page to Standards mode (which is correct), but it's rendering differently from what you're expecting because you built it initially without the doctype.

In terms of fixing the specific issues - that's harder to do without seeing a live example, but I would make sure that you have units on all your font sizes, don't have typos anywhere, etc. (you can run your CSS through the W3C's validator to double-check).

With your "embedded" fonts, are you talking web fonts? If not, the font won't appear unless it's installed locally.

Hopefully this helps! In the future, definitely include a doctype when you start coding as that will mitigate a lot of these issues.