Changing the class of an element with Javascript?

[Ryan]

I'm trying to change the class of an element of a <div> based on whether content fills the viewport or not. Ideally, I would just be able to change the position attribute directly, but I couldn't get that to work, so I settled for changing class.

Here's the HTML:

<div id="footer" class="relative">

<script language="javascript">
var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;

var divh = document.getElementById('container').offsetHeight;

if(divh < windowHeight) {
document.getElementById('footer').className = 'absolute';
}
else {
document.getElementById('footer').className = 'relative';
}
</script>
//more HTML
</div>I'm going to remove the Javascript from the HTML after I get it working.

The CSS:
#footer {
bottom: 0;
padding: 0 0 20px 0;
float: none;
clear: both;
margin: auto auto 0 80px;
width: 540px;
height: 4em;
text-align: left;
font-size: 8pt;
color: rgb(181,181,181);
}

.relative {
position: relative;
}

.absolute {
position: absolute;
}


It works in Safari, but not Firefox. I haven't even tried IE yet (that'll be fun...). Any ideas?

[chucker]

Looks about right to me. Do you get errors in Firefox's JavaScript console?

[Ryan]

There is one, but it doesn't seem related to anything I'm doing.

Error: Warning: unrecognized command line flag -psn_0_28704769

Source File: file:///Applications/Firefox.app/Contents/MacOS/components/nsBrowserContentHandler.js
Line: 706

The DOM Inspector shows the class remains unchanged, but CSSEdit shows the opposite.

[Ryan]

On a related note, why doesn't this validate? (HTML 4.01 Strict)

<p>
<ul>
<li>Hosted by <a href="http://dreamhost.com">Dreamhost</a></li>
<li>Blog powered by <a href="http://www.textpattern.com/">Textpattern</a></li>
</ul>
</p>

[Shades of Blue]

It doesn't validate because the P tag cannot contain other block-level elements (such as the UL element).

http://www.w3.org/TR/html401/struct/text.html#edef-P

[Ryan]

It doesn't validate because the P tag cannot contain other block-level elements (such as the UL element).

http://www.w3.org/TR/html401/struct/text.html#edef-PThanks, I had no idea.

[Ryan]

I finally fixed the Javascript problem. I don't know why that code didn't work, but I managed to find a workaround by adding up the heights of other elements instead. Not as accurate, and there's one case in which it will cause a strange presentation, but I think it's acceptable.