Javascript, Netscape, and positioning

Are there little issues there?

[SethCall]

Ok, I have been trying to help a friend forever with this, and I really have no idea.

Hes tryin to size and position divs using javascript. The divs are generated content, and the styling is also generated. After they are created, they are positioned with javascript as well.
I suppose I will just sum up the issues I think may be a problem, and maybe this rings a bell with you:

1. when placing a div within another div, in Mozilla, if the outer div is position:absolute, the inner one's width is 0.

If the outer div is position:relative, then the width is correct. But, but changing the style.left property in javascript, the inner div doesn't move. These divs are generated dynamically, in other words, placed using document.write().

General Concepts:
1. position absolute in mozilla: does it position with respect to its containing div, or the body?

2. does a absolutely positioned div in mozilla size to content?

3. What should your body style be set too? this is what i do currently:

body{
position:absolute;
background-color: #d0d0d0;
color: #000000;
font-size: 1em;
top: 0px;
left: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
width:100%;
height:100%;
}

essntially, we can't use javascript to move these divs around. in the end result of the page, the divs are all overlapping each other, not positined at all. In IE, its working. Its maddening, is all :) sorry if this doesn't make much sense. this is the most vexing problem I have ever had.

[DrDoc]

0. The inner div should resize just fine. The outer div will resize to wrap snugly around the inner one if needs be.

1. I've never set the height/width in style sheets before changing/applying them using JavaScript. It might confuse the browser, depending on whether it should apply the CSS or JS values.

2. Relative position should be according to the nearest positioned element in all browsers. Absolute position is the body though.

3. Yep, it resizes to content.

4.

var currentleft = document.getElementById('theID').style.left;
var currentwidth = document.getElementById('theID').style.width;
...

Just remember that some browsers will report with "px" on the end, others won't.

5. The body styles look fine. I would, however, change background-color to just background. Also, absolute positioning isn't necessary for the body tag. Use padding: 0px as a shorthand for left/bottom/right/top.

Note: Just make sure to have a <noscript> tag apply "acceptable" styles in case JS is turned off.

[SethCall]

thank you very much drdoc for your replies. you may have noticed i did change my amount of questions: seems you were too quick in answering :)

But again, thanks.

[DrDoc]

<added>
It's important to test, test, test, and test again!

CSS and JS are by no means impossible to mix, just difficult. Very difficult ;)
</added>

[SethCall]

Ok he figured it out: 2 issues he was having:

1. He wasn't adding "px" to his numbers when setting left, width, and so on.

2. One is that if both divs (inner and outer) are abs. positioned, and you you try to size the inner div larger than the outer div, it automatcaily shrinks the inner div back down to fit. Maybe this seems obvious, but he has a huge javascript routine that he wrote which depended on that not being true.

Sigh.