Member Avatar for veledrom

Hi,

Size of HTML <hx> tags differs in Ie and Firefox. For example <h2> is displayed bigger in IE whilst it is smaller in Firefox. How can i solve this problem?

Thanks

  • 3 Contributors
  • 4 Replies
  • 103 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by veledrom

Dani AI

Generated

Thread recap: reported that heading sizes (for example <h2>) look different in IE vs Firefox. and offered quick fixes. Below is a practical, modern workflow to make heading sizing predictable, accessible, and stable across browsers without relying on print-oriented units.

Start by forcing standards mode and a shared baseline. Include a proper HTML5 doctype and a small normalization layer such as Normalize.css (Normalize.css) so browsers start from the same baseline. Then set a root font-size that preserves user preferences and use relative units for headings so they scale consistently:

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

Why this helps: CSS points (pt) are intended for print and can map to pixels inconsistently on screens; pixels (px) are absolute and can break user zoom and accessibility. Using root-relative units like rem gives predictable scaling while respecting user/browser settings. For details on units and accessibility, see MDN on font sizing (font-size | MDN).

Quick troubleshooting tips: check computed styles in DevTools to see the final font-size (in pixels), test with browser zoom and different OS DPI settings, and confirm that no older stylesheets are reapplying pixel values. If further fine-tuning is needed, establish a small typographic scale in CSS variables so all headings change consistently when the root size is adjusted.

Recommended Answers

All 4 Replies

Member Avatar for blocblue

You need to override the default styles applied by different browsers, as these differ from one browser to the next.

This can be done using CSS. E.g.

h1 (
[INDENT]margin: 0; padding: 8px 10px;
font-family: arial, sans-serif; font-size: 18px;[/INDENT]
)
Member Avatar for veledrom

Thank you. It is better now.

Member Avatar for MidiMagic

Using px replaces one trouble with another. The page now becomes monitor-resolution-sensitive.

Use pt instead.

Member Avatar for veledrom

It is also good to know MidiMagic. Thanks

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.