Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #11553 > unrolled thread

DOCTYPE related question

Back to article view | Back to comp.lang.javascript

Contents

  DOCTYPE related question "Tom de Neef" <tdeneef@qolor.nl> - 2012-02-10 12:48 +0100
    Re: DOCTYPE related question "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-02-10 14:05 +0200
    Re: DOCTYPE related question Martin Honnen <mahotrash@yahoo.de> - 2012-02-10 13:07 +0100
      Re: DOCTYPE related question "Tom de Neef" <tdeneef@qolor.nl> - 2012-02-10 16:41 +0100
    Re: DOCTYPE related question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-10 13:35 +0100
    Re: DOCTYPE related question Jeff North <jnorthau@yahoo.com.au> - 2012-02-11 01:34 +1100
      Re: DOCTYPE related question "Tom de Neef" <tdeneef@qolor.nl> - 2012-02-10 16:42 +0100
      Re: DOCTYPE related question Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-10 17:07 +0100

#11553 — DOCTYPE related question

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

[toc] | [next] | [standalone]

#11555

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/

[toc] | [prev] | [next] | [standalone]

#11556

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/

[toc] | [prev] | [next] | [standalone]

#11563

"Martin Honnen" <mahotrash@yahoo.de> schreef in bericht 
news:4f35086c$0$6547$9b4e6d93@newsspool4.arcor-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 

[toc] | [prev] | [next] | [standalone]

#11557

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$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#11562

On Fri, 10 Feb 2012 12:48:05 +0100, in comp.lang.javascript "Tom de
Neef" <tdeneef@qolor.nl>
<4f3503f5$0$6915$e4fe514c@news2.news.xs4all.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
>| 

[toc] | [prev] | [next] | [standalone]

#11564

"Jeff North" <jnorthau@yahoo.com.au> schreef in bericht 
news:6jaaj755k23g5ntuvb0ql3p8pnclqlmu5u@4ax.com...
> On Fri, 10 Feb 2012 12:48:05 +0100, in comp.lang.javascript "Tom de
> Neef" <tdeneef@qolor.nl>
> <4f3503f5$0$6915$e4fe514c@news2.news.xs4all.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

[toc] | [prev] | [next] | [standalone]

#11566

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$8300dec7@news.demon.co.uk>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web