DOCTYPE related question

Discussion in 'Javascript' started by Tom de Neef, Feb 10, 2012.

  1. Tom de Neef

    Tom de Neef Guest

    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
     
    Tom de Neef, Feb 10, 2012
    #1
    1. Advertising

  2. 2012-02-10 13:48, Tom de Neef wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Feb 10, 2012
    #2
    1. Advertising

  3. Tom de Neef wrote:

    > 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.

    --

    Martin Honnen --- MVP Data Platform Development
    http://msmvps.com/blogs/martin_honnen/
     
    Martin Honnen, Feb 10, 2012
    #3
  4. Tom de Neef wrote:

    > […]
    > 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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Feb 10, 2012
    #4
  5. Tom de Neef

    Jeff North Guest

    On Fri, 10 Feb 2012 12:48:05 +0100, in comp.lang.javascript "Tom de
    Neef" <>
    <4f3503f5$0$6915$4all.nl> wrote:

    >| 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";
    >| 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
    >|
     
    Jeff North, Feb 10, 2012
    #5
  6. Tom de Neef

    Tom de Neef Guest

    "Martin Honnen" <> schreef in bericht
    news:4f35086c$0$6547$-online.net...
    > Tom de Neef wrote:
    >
    >> 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.
    >


    Spot on. Thank you.
    Tom
     
    Tom de Neef, Feb 10, 2012
    #6
  7. Tom de Neef

    Tom de Neef Guest

    "Jeff North" <> schreef in bericht
    news:...
    > On Fri, 10 Feb 2012 12:48:05 +0100, in comp.lang.javascript "Tom de
    > Neef" <>
    > <4f3503f5$0$6915$4all.nl> wrote:
    >
    >>| 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";


    That was it. Thank you.
    Tom
     
    Tom de Neef, Feb 10, 2012
    #7
  8. Jeff North wrote:

    > 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).

    >>| 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";
    >>| return node;
    >>| }


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


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Feb 10, 2012
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Davmagic .Com

    Question about Doctype

    Davmagic .Com, Nov 22, 2003, in forum: HTML
    Replies:
    5
    Views:
    453
    Toby A Inkster
    Nov 24, 2003
  2. Albert Wiersch
    Replies:
    29
    Views:
    840
    Mark Parnell
    Aug 16, 2005
  3. Maxwell Hammer
    Replies:
    7
    Views:
    647
    Peter Hansen
    Jun 18, 2005
  4. Cirene
    Replies:
    1
    Views:
    280
    Cirene
    Nov 15, 2007
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,309
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page