Member Avatar for PDB1982

I've created a web page and external css that work in IE, but what do I need to get them to work in Firefox?

  • 5 Contributors
  • 4 Replies
  • 102 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Building on the testing mindset suggested by and the idea of targeting IE raised by (and the request from to post code), the checklist below fills gaps not yet covered: markup/DOCTYPE sanity, normalization of browser defaults, predictable box model, and using modern debugging/feature-detection workflows.

Start with a minimal reproducible case and validate it. Create the smallest HTML file that reproduces the problem and run it through the W3C validator to catch stray tags or missing closes that make browsers behave differently. A correct HTML5 doctype and charset will keep browsers out of quirks mode:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Minimal test</title>
</head>
<body>
  <!-- minimal markup that reproduces the problem -->
</body>
</html>

Normalize browser defaults and force a consistent box model. Add a small, single global rule after any reset/normalize so widths and paddings are easier to reason about:

/* include normalize.css first, then: */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Use the browser devtools to inspect computed styles, layout metrics and inherited rules (Firefox DevTools has a reliable computed/layout panel). If a property behaves differently, disable rules in the inspector to isolate the offender. For feature support and capability-based fallbacks prefer feature detection and progressive enhancement (Modernizr or runtime checks) rather than browser-targeting. References: MDN box-sizing, Normalize.css, Firefox DevTools, W3C Validator.

If the minimal test still differs between IE and Firefox, post that tiny test case (HTML + CSS only). It makes diagnosis fast and avoids chasing unrelated layout complexity.

Recommended Answers

All 4 Replies

Member Avatar for ko ko

Post your code here, let us see.

Member Avatar for MidiMagic

Design with Firefox first. Then fix the bugs in the IE version.

Never put size styles (width, height) and surrounding styles (margin, border, padding) on the same tag or in the same stylesheet style. If you do, IE will render them differently than any other browser does.

Instead, nest two tags, putting the size styles on one and the surrounding styles on the other. Then all browsers will render them the same.

Note that IE renders font characters one pixel wider than FF does, but reduces the space between characters by 1 pixel.

If you use tables, define the vertical alignment. IE and FF have different defaults.

Member Avatar for laura_ci

I second MidiMagic, work and test everything in Firefox first, then fix the bugs that IE creates. To target IE with its own css use this:

<html>
  <head>
    <!-- Meta tags, title, etc. goes in here -->
    <link rel="stylesheet" href="default.css" type="text/css" /> <!-- Normal stylesheet -->
    <!--[if lte IE 7]>
      <link rel="stylesheet" type="text/css" href="default_ie7.css" /><!-- Stylesheet which targets IE 7 or less -->
    <![endif]-->
  </head>
  <body>
    <!-- Content goes in here -->
  </body>
</html>
Member Avatar for Troy III

its the other way around

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.