Moving a fixed toolbar from top to bottom

I'm not an idiot when it comes to this stuff, but why isn't this working?

[digitalv]

Here's an absolute top div used as a toolbar (simplified code, of course).

<div id="whatever" style="position:fixed;top:0px;left:0px;"> content </div>

So lets say the user wants to move that toolbar to the BOTTOM of the page instead. So an onclick executes...

document.getElementById('whatever').style.top = '';
document.getElementById('whatever').style.bottom = '0px;'

... why doesn't this work?

If I load the div using bottom:0px instead of top:0px it positions on the bottom like it should, so why doesn't it move upon execution of the Javascript isn't it moving?

There aren't any errors, and if I run an alert(document.getElementById('whatever').style.bottom) it returns '0px', so it IS setting properly... but it's just not moving on the page.

Why?

[swa66]

Normal CSS (as in non-javascript) has specificity, and inline is about the most important it gets and next to impossible to override ...

I'm by far not a javascript expert.

As always, what browsers have you tried it with ?

I'm not sure the empty string value for top is going to reset it to the default value (auto is the default) and setting top and bottom might not yield what you seek (legacy IE versions might well ignore the bottom setting if they see a top, and even in others if you set margins, height and top and bottom, it's nearly trivial to create a conflict that the browser will have to ignore some of your settigns in order to remove the conflict).

[digitalv]

Same results in Firefox 3.5 and IE8 - if I hard code bottom:0px and ignore top it displays properly, just doesn't seem to change on the fly the way I would change a background color or anything else using the same code. Logically it *should* work, it just doesn't move.

[monie]

My first instinct was that document.getElementById('whatever').style.top = ''; wasn't resetting top properly. What happens if you replace the " with 50px and comment out the part resetting bottom--does it move?

Do you explicitly set the bar's height w/ CSS?

"Normal CSS (as in non-javascript) has specificity, and inline is about the most important it gets and next to impossible to override ..." Good thinking, but I just wrote some javascript that overrides inline CSS. The alert() output also shows it's being reset, just being stubborn about displaying.

"if I hard code bottom:0px and ignore top it displays properly" hmm... definitely seems like top is the pesky part...

[monie]

My first instinct was that document.getElementById('whatever').style.top = ''; wasn't resetting top properly. What happens if you replace the " with 50px and comment out the part resetting bottom--does it move?

Do you explicitly set the bar's height w/ CSS?

"Normal CSS (as in non-javascript) has specificity, and inline is about the most important it gets and next to impossible to override ..." Good thinking, but I just wrote some javascript that overrides inline CSS.... The alert() output also shows it's being reset, just being stubborn about displaying.

"if I hard code bottom:0px and ignore top it displays properly" hmm... definitely seems like top is the pesky part.

--
sorry about the double post.