javascript code doesn't work in firefox

Brief summary and root cause: the script was relying on browser-dependent behavior (implicit globals and script order) rather than explicitly grabbing and scoping DOM elements and variables. That explains why IE tolerated it but Firefox did not. As @scrappedcola observed, the page needed the element reference to be obtained when the element actually exists; and as @fxm pointed out, the DOCTYPE/quirks-mode difference can change how browsers accept nonstandard or loose HTML.

Practical, low-risk fixes to make it robust across browsers:

• Always declare loop and temp variables with let/const or var so they do not become globals.
• Get the container explicitly at runtime (for example with document.querySelector(...)) rather than relying on implicit identifiers.
• Replace setTimeout with requestAnimationFrame for smoother animation and to avoid using string-eval calls.
• Use parseInt(value, 10) to avoid radix surprises.
• Avoid deprecated <font> tags; use <span> with CSS or inline style instead.
• Reduce layout thrash by updating the DOM efficiently (reuse nodes, or build a string once per frame and set innerHTML once).

A minimal modern animation loop pattern (illustrative only — adapt your size calculation and DOM update strategy):

const container = document.querySelector('#theDiv');
let frame = 0;
function render() {
  // build/update HTML for this frame (use spans or update existing nodes)
  container.innerHTML = htmlForFrame;
  frame = (frame + 1) % text.length;
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

Troubleshooting checklist: open the browser console for ReferenceError or syntax messages; validate your markup and include a standards DOCTYPE so Firefox runs in standards mode; test after moving the script below the target element or by waiting for DOMContentLoaded. These small changes make the animation work reliably in modern browsers and improve performance and maintainability.