text works in IE, not in Firefox

[Dominic Whitham]

Hi, first post here!

This function works great in IE (text shows up great), but in Firefox, it doesn't work (no text at all):

function AddText(text, x, y, color, size) {
    labelCount++
 
    var position = $("canvas").position();
    var CanvasX = x + position.left + document.documentElement.scrollLeft;
    // -5 accounts for half the text height
    var CanvasY = y + position.top + document.documentElement.scrollTop - 5;
 
    var label = document.createElement("div");
    label.id = "label" + labelCount;
    label.style.position = "absolute";
    label.style.left = CanvasX;
    label.style.top = CanvasY;
    label.style.fontFamily = "sans-serif";
    label.style.fontSize = size;
    label.style.color = color;
    label.appendChild(document.createTextNode(text));
    document.body.appendChild(label);
}
 

Any thoughts or suggestions are appreciated.

Thanks!

Using IE8 and FF 3.6.13

[Dominic Whitham]

BTW, this function was adapted from page 560 of the book Javascript The Definitive Guide Fifth Edition.

The answer to the issue is that I left out + "px", so

label.style.left = CanvasX + "px";
label.style.top = CanvasY + "px";

Now, everything works fine in IE and FF.

[acoder]

Thanks for posting the solution (not many come back to do that).

Just a quick point: I wouldn't use IE as my starting point for testing anything if I want an application/website to work cross-browser.