JavaScript to create image using document.createElement not working with DTD

dshrenik
dshrenik used Ask the Experts™
on
I am trying to place an image on an existing webpage (Firefox) through JavaScript using the following code:
(I am using content.document since the code is being run from a FireFox sidebar plugin)

//Image Element                              
iElement = content.document.createElement("img");
iElement.src = "source";
iElement.style.position = "absolute";
iElement.style.left = 50;
iElement.style.top = 50;
iElement.style.zIndex = 100;                  
content.document.body.appendChild(iElement);

This code works perfectly on webpages without DTD,
(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">)
But when used on webpages with DTD (either strict or loose), the image always gets placed at the bottom left corner of the page, regardless of the position specified.
Also, when I pefix the DDT with <HTML>. the code works.

Please let me know if there is a foolproof way of placing an image on an existing webpage at a specific position, regardless of DTD being used or not.

Here are the pages for your reference (I haven't added the JavaScript on these pages - it is being called from the sidebar):
No DTD (Works): http://xpst.vrac.iastate.edu/WebxPST/NoDTD.html
Loose DTD (Doesn't work): http://xpst.vrac.iastate.edu/WebxPST/LooseDTD.html
Strict DTD (Doesn't work): http://xpst.vrac.iastate.edu/WebxPST/StrictDTD.html
Prefix DTD with <HTML> (Works): http://xpst.vrac.iastate.edu/WebxPST/PrefixDTD.html
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007

Commented:
this is correct behaviour when a browser is in 'standards' mode. You need to understand the concept of css positioning.

See here: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Top Expert 2007

Commented:
I'll try and summarize it here:

absolute positioning works by using the next available parent container that is also positioned (absolutely or relatively). if  there is no parent positioned then it uses the document body, which  explain what is happening in your case when the dtd makes the browser follow standards (any other behaviour is incorrect, like that you see without a dtd).

to fix this for your situation. simply add a 'position:relative' property to any one of the parents of the div you're trying to position. (the absolutely positioned div will now be positioned with respect to this parent div)

another article: http://stopdesign.com/archive/2003/09/03/absolute.html

Author

Commented:
I don't think the problem is with css positioning, because regardless of what position co-ordinates I provide, the image is always being inserted at the bottom left corner of the webpage (with DTD).

On the other hand, the image gets placed at the right location on a webpage without DTD.
Top Expert 2007
Commented:
Ok, the other issue could be the javascript 'style.left' expects a unit like 'px'.

try changing your code to:

//Image Element                              
iElement = content.document.createElement("img");
iElement.src = "source";
iElement.style.position = "absolute";
iElement.style.left = '50px';
iElement.style.top = '50px';
iElement.style.zIndex = 100;                  
content.document.body.appendChild(iElement);

see: http://www.w3schools.com/css/pr_pos_left.asp

Author

Commented:
Phew! That did the trick. Can't believe that such a small thing killed 3 hours of my time.
Thank you so much!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial