JavaScript to create image using document.createElement not working with DTD
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.createEle
iElement.src = "source";
iElement.style.position = "absolute";
iElement.style.left = 50;
iElement.style.top = 50;
iElement.style.zIndex = 100;
content.document.body.appe
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
(I am using content.document since the code is being run from a FireFox sidebar plugin)
//Image Element
iElement = content.document.createEle
iElement.src = "source";
iElement.style.position = "absolute";
iElement.style.left = 50;
iElement.style.top = 50;
iElement.style.zIndex = 100;
content.document.body.appe
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
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
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
ASKER
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.
On the other hand, the image gets placed at the right location on a webpage without DTD.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Phew! That did the trick. Can't believe that such a small thing killed 3 hours of my time.
Thank you so much!
Thank you so much!
See here: http://www.barelyfitz.com/screencast/html-training/css/positioning/