DOCTYPE related question

T

Tom de Neef

I have a JavaScript function which extracts data from a genealogical html
page and produces a layout chart of the family relationships which is then
inserted in the page.
It works fine on my testpages, which do not have a DOCTYPE (just start with
<html>). The function is called from <body onload='functionCall()'>.
The production site has pages which start with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head <html
xmlns="http://www.w3.org/1999/xhtml">
Here, the chart is produced but all elements of the chart fall on each other
with FF and Chrome (IE8 does fine).

The function inserts nodes in the DOM. These nodes are created using:
function newNode(x,y,width,height) {
var node = document.createElement('div');
node.style.position='absolute';
node.style.left = xOffset+x;
node.style.top = yOffset+y;
node.style.width = width;
node.style.height = height;
return node;
}

(xOffset and yOffset are global to the encapsulating function.)
It appears that the positioning and size info will not be interpreted with
this Transitional XHTML 1.0.
The page was successfully checked as valid XHTML.
I hope this is enough info for an advice how to modify.
Thank you,
Tom
 
J

Jukka K. Korpela

2012-02-10 13:48 said:
I hope this is enough info for an advice how to modify.

You didn’t specify the URL.

If adding a DOCTYPE declaration causes a problem, then the real problem
was that your page design relies on Quirks Mode features. This can means
dozens of things.
 
M

Martin Honnen

Tom said:
The function inserts nodes in the DOM. These nodes are created using:
function newNode(x,y,width,height) {
var node = document.createElement('div');
node.style.position='absolute';
node.style.left = xOffset+x;

Check the error console, I am sure it warns that you are assigning
values which are not proper CSS values as for instance 'left' needs a
number plus a unit e.g.
node.style.left = xOffset + x + 'px';
That way most of your dynamically assigned CSS values are ignored in
standards mode by the browser.
 
T

Thomas 'PointedEars' Lahn

Tom said:
[…]
The production site has pages which start with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head <html ^^^^^^^^^^^
xmlns="http://www.w3.org/1999/xhtml">

Not Valid. (Is it so hard to copy and paste your code?)
Here, the chart is produced but all elements of the chart fall on each
other with FF and Chrome (IE8 does fine).

The function inserts nodes in the DOM. These nodes are created using:
function newNode(x,y,width,height) {
var node = document.createElement('div');
node.style.position='absolute';
node.style.left = xOffset+x;
node.style.top = yOffset+y;
node.style.width = width;
node.style.height = height;
return node;
}

(xOffset and yOffset are global to the encapsulating function.)
It appears that the positioning and size info will not be interpreted with
this Transitional XHTML 1.0.

The relevance of this question to ECMAScript-based scripting is zero. It is
a *CSS* issue. Read the CSS 2.1 Specification on the proper values for the
`left' etc. properties. Those are most certainly not (you have not posted
the *call*).
The page was successfully checked as valid XHTML.

Either the validator you use is borken or you have not copy-pasted the code.
I hope this is enough info for an advice how to modify.

Probably it is where this is on-topic.


PointedEars
 
J

Jeff North

| I have a JavaScript function which extracts data from a genealogical html
| page and produces a layout chart of the family relationships which is then
| inserted in the page.
| It works fine on my testpages, which do not have a DOCTYPE (just start with
| <html>). The function is called from <body onload='functionCall()'>.
| The production site has pages which start with
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head <html
| xmlns="http://www.w3.org/1999/xhtml">
| Here, the chart is produced but all elements of the chart fall on each other
| with FF and Chrome (IE8 does fine).
|
| The function inserts nodes in the DOM. These nodes are created using:

I hope you've wrapped your script within the CDATA element as this is
a requirement for XHTML.
| function newNode(x,y,width,height) {
| var node = document.createElement('div');
| node.style.position='absolute';
| node.style.left = xOffset+x;
node.style.left = xOffset+x + "px";
| node.style.top = yOffset+y;
node.style.top = yOffset+y +"px";
| node.style.width = width;
node.style.width = width + "px";
| node.style.height = height;
node.style.height = height + "px";
 
T

Tom de Neef

Martin Honnen said:
Check the error console, I am sure it warns that you are assigning values
which are not proper CSS values as for instance 'left' needs a number plus
a unit e.g.
node.style.left = xOffset + x + 'px';
That way most of your dynamically assigned CSS values are ignored in
standards mode by the browser.

Spot on. Thank you.
Tom
 
T

Thomas 'PointedEars' Lahn

Jeff said:
I hope you've wrapped your script within the CDATA element as this is
a requirement for XHTML.

No, it is not. It is a recommendation (and I do not mean W3C
Recommandation, although that applies as well).
node.style.left = xOffset+x + "px";
node.style.top = yOffset+y +"px";
node.style.width = width + "px";
node.style.height = height + "px";

This script does not contain any `<' or `&'. Therefore, it does not need to
be declared CDATA.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top