Member Avatar for fruitgum

I have finally managed a page with CSS layout BUT ...
While header text fonts are exactly the same in IE and Firefox, all the <p> text is much smaller in Firefox than IE. It's messing up my layout, the difference is quite large.
My text size is set as 62.5% in body. Then all text sizes are in ems. <p> is 1.2em with line height 130%.
H1, for example, is 2.7em.
Headers are Trebuchet, p is Verdana.
In IE on my pc text size is medium. I can't see where you change it in Firefox but I certainly haven't changed it from default and anyway the headers are fine.
So what's happening?
I've checked carefully and can see no other styles which might interfer unless the (DW CS4 Spry) menu bar does - it has "font 100%".
Any ideas?

  • 2 Contributors
  • 1 Reply
  • 135 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by colweb

Dani AI

Generated

— the quickest way to find the cause is to inspect a paragraph with Firefox’s developer tools (F12) or Firebug as suggested and look at the computed font-size and the CSS rule that set it. That will show whether the paragraph is resolving to a different pixel size than the headings and whether a parent rule (for example the Spry menu) is changing the base size for that part of the DOM.

Things to check in this order:

  • Reset page zoom (Ctrl+0) and confirm Firefox’s “Minimum font size” isn’t forcing a different value (see Mozilla support on changing fonts and colors).
  • In the inspector, view the computed font-size in pixels and step up the ancestor chain to spot any parent that sets a font size (percentages on parents multiply down and can change em results).
  • Confirm the page is in standards mode (valid DOCTYPE). Quirks/compatibility modes can change default sizing between IE and Firefox.

If you need a reliable baseline across browsers:

  • Set the root font on the html element (rather than relying on body inheritance) or use rem units so components don’t unexpectedly scale when nested.
  • Use a unitless line-height (for example 1.3) so spacing scales cleanly with font-size.
  • As a quick test, temporarily set the paragraph to a known pixel size to verify whether the browsers match; if they do, the issue is inheritance or browser settings rather than rendering.

For details on how browsers compute sizes and best practices for line-height, see MDN’s documentation on font-size and line-height. If the computed pixel sizes match but the text still looks different, different font rendering/ClearType settings between browsers or OS-level DPI can cause a visual difference even when CSS values are identical.

Member Avatar for colweb

I presume IE and Firefox are both run on the same machine? There can be a significant difference in layout when you see the site with IE or Firefox on Windows and then look at it in Firefox on a Linux machine.

Do you have firebug installed in Firefox? If not, install it and inspect the actual size of the text inside your <p> tags. Firebug can also tell you what styles are inhered from css. Might give you a clue why there is a difference with IE.

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.