Postioning of text not working correctly

Question

I have an if statement that decides what to render the page in.

<script language="JavaScript">
if (NS4) {
    document.write('<LAYER NAME="floatlayer" LEFT="22" TOP="60">');
}

if ((IE4) || (NS6)) {
    document.write('<div id="floatlayer" style="position:absolute; left:22; top:62;">');
}
</script>

Now I know this works because this has been the code for previous versions and I had no problems. I created a page that forces the page to render as the most up to date viewer possilbe(IE10,Chrome1) I used a simple Meta tag to do so;

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

When I go on IE and switch it to Quirks mode the page works correctly and everything is lined up properly but anything other than Quirks the page is broken. What is the reason for this and how can I fix it?

Answer 1

The fix was as simple as removing the

<script language="JavaScript">

if (NS4) {
    document.write('<LAYER NAME="floatlayer" LEFT="22" TOP="60">');
}

if ((IE4) || (NS6)) {
    document.write('<div id="floatlayer" style="position:absolute; left:22; top:62;">');
}
</script>

and creating a class for the table. Then I set the properties in the .css file and the text positioned properly.

Answer 2

22 is not a valid value for left in CSS. You probably want 22px and similar for the top value. Browsers will accept unitless lengths in some properties in quirks mode, though; see http://quirks.spec.whatwg.org/#the-unitless-length-quirk. That's why things work for you in quirks mode.