CSS in Mozilla (Firefox)

[Tim Slattery]

I have a div that's defined like so:

<div id="footer">
footer text for web pages
</div>

In the stylesheet is this entry:

#footer {
background-color: #006600;
position: absolute;
top: 410px;
left: 0px;
width: 100%;
z-index: 4;
border: 1px solid #009900;
border-width: 2px 0px 1px 0px;
}

And following the DIV in the HTML file is a Javascript block that
assigns a position for this div, like so:

ftr = document.getElementByPosition("footer")
ftr.style.top = iTop;

where iTop has been calculated earlier in the Javascript. This works
correctly in Internet Explorer. When I put alerts in the script, I see
the page displayed with the footer at 410 pixels (as per the style
sheet), then it jumps to the newly assigned position.

In Mozilla Firefox, the footer never moves. The "calculated style" in
the DOM browser *always* shows the value 410 (from the style sheet),
*never* the assigned value. What's more, trying to display
ftr.style.top results in a blank.

So what's up? It's not a timing issue, when I trigger the Javascript
long after the page loads the result is the same. Is there different
syntax in Mozilla-land for addressing stsyle elements? Or is this a
Mozilla bug? (It does the same thing in NS7)

[Mark Preston]

Tim Slattery wrote:

I have a div that's defined like so:

<div id="footer">
footer text for web pages
</div>

[snip]
And following the DIV in the HTML file is a Javascript block that
assigns a position for this div, like so:

ftr = document.getElementByPosition("footer")
ftr.style.top = iTop;

[snip]
In Mozilla Firefox, the footer never moves. The "calculated style" in
the DOM browser *always* shows the value 410 (from the style sheet),
*never* the assigned value. What's more, trying to display
ftr.style.top results in a blank.

One thing that immediately springs to mind is to ask why you have not
used the more sensible statement:-

ftr = document.getElementById ("footer")

What happens if you use that?