Member Avatar for bob on whidbey

I'm in the process of converting many sections of my web to templates (for use with Contribute) so I can get away from all of that mundane editing. Each page has a header, navbar, and body, with only the body being editable in the template.

When viewed with Firefox, every page looks right. However, with IE (6 & 7 tested) the pages with some templates are correct and with others, the're not. The problem with the "bad" pages is that the font size is about two points too big.

See www.writeonwhidbey.org The Home Page and the Membership Section all look correct, while all the pages in the Classes, Contact Us & Contest sections have fonts which are too large.

All the pages in the web site use the same CSS file. Adobe hasn't been able to figure this out, yet. Perhaps one of you gurus has seen something similar or perhaps can guess how I can get around this problem.

  • 2 Contributors
  • 2 Replies
  • 132 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by bob on whidbey

Dani AI

Generated

A compact, practical checklist and quick fixes for the kind of browser-specific font-size drift that can appear when pages come from templates. Following the thread and 's prompt, the steps below focus on the differences that are invisible in an editor but change how a browser computes font sizes.

  • Verify the very top of the final HTML output. Any missing or different DOCTYPE or any characters (including a byte-order mark or an XML prolog) before the DOCTYPE can force an alternate rendering mode that changes font metrics. Compare the first few lines of a working page and a problematic page byte-for-byte.
  • Check for a meta X-UA-Compatible header or conditional comments that could put the page into a compatibility/quirks mode. That will override standards-mode layout in some browsers.
  • Diff the generated HTML (not your source template) for hidden inline styles, injected <span> or <font> tags, or extra wrapper elements the template system may insert. WYSIWYG/template tools sometimes add inline font-size rules that override external CSS.
  • Use developer tools to inspect computed font-size on the same element in both pages and note which rule is winning; that points directly to the responsible stylesheet, inline rule, or browser default.

If a quick fix is needed, normalize the base font explicitly and avoid cascading surprises:

html { font-size: 100%; }
body { font-size: 14px; line-height: 1.4; }

As a targeted override (use sparingly):

#mainContent, #mainContent * { font-size: 100% !important; }

Caveats: forcing pixel sizes reduces scalability; !important is a last resort. The most robust solution is to ensure the template produces identical top-of-file markup (DOCTYPE and headers) and no stray inline font-sizing. That single comparison most often reveals the culprit.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

Does the CSS contain the font-size attribute 'larger'? If so, each time it is encountered, it makes the font larger, relative to the lastr time it was encountered.

Member Avatar for bob on whidbey

No, the CSS doesn't use the word larger anywhere. All my font sizes are in terms of :large, x-small, small, etc.

I've finally given up on the template - never having solved the problem. Three sections of my web www.writeonwhidbey.org use templates, which have an editable region covering the entire body area (The Home page, Membership, and Contact Us). All the other sections don't use any template. This hasn't been a problem in Contribute. The user can't edit the header or navbar because they are inserted via SSI. While technically the entire page is editable, only the body ends up being editable. So, I'm happy, but I never did figure out my problem.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.