DOCTYPE Mismatch and a Collapsing Layout
A four-page marketing microsite was built by pasting content from a 2011-era template. index.html opens with a full HTML5 doctype, but about.html, services.html, and contact.html still begin with a legacy transitional doctype and include a <font>-style wrapper inherited from the paste. In BrowserLab-style previews, index.html centers correctly, but the other three pages render in what looks like quirks mode: a max-width: 960px; margin: 0 auto; container stretches full-bleed, and percentage heights behave inconsistently. The pages share one external stylesheet. The developer's instinct is to patch the CSS with !important rules until the three pages match. There is a hard deadline, and the client has approved no design changes - only that all four pages look identical.
1. Explain the root cause of the layout divergence and justify fixing the doctype rather than adding CSS overrides.
Read the worked answer
The three pages are rendering in quirks mode because of the legacy doctype (and the stale presentational markup around it). In quirks mode the browser applies a different box model and legacy layout behaviors; notably, auto-margin centering and some width/height calculations don't behave as they do in standards mode. That is why a shared stylesheet produces two different layouts from identical CSS.
Patching with !important is the wrong move for three reasons:
- It treats a parsing/mode problem as a styling problem, so you'd be fighting the browser's legacy engine rather than the cascade.
- Quirks-mode quirks are broad and undocumented per-browser; overrides that fix one symptom often destabilize another.
- The client approved "identical output," which the doctype fix delivers with zero design change - overrides risk visual drift.
Fix: replace each legacy doctype with <!DOCTYPE html>, strip the <font> wrapper in favor of the existing stylesheet, and re-preview. The shared CSS should then render consistently.
2. After the doctype fix, `contact.html` still looks slightly off. What is the disciplined next step before touching CSS?
Read the worked answer
Validate the document structure first. A doctype change can expose malformed markup that the legacy parser silently tolerated - an unclosed <div>, a stray </p>, or a duplicated <body>. Run the page through the W3C validator (or Dreamweaver's validation) and fix structural errors before editing styles.
Reasoning: if the DOM tree is wrong, any CSS you write is compensating for a phantom element. You'd add a rule, see no change, add another, and end up with dead CSS masking a one-character tag error. Structure first, then presentation - the same order the doctype fix itself followed. Only once the markup validates should you diff contact.html's computed styles against index.html to find the real discrepancy.