Finally, with the help of Firebug and lots of patience, I discovered why my jQuery animation wasn’t working (on a personal project of mine, more on that later…)  Essentially I intended to animate a div from 100px to a calculated height ($(window).document.height()-$(this).height()) but for the life of me, I could not get it to work.  It actually worked in IE 6 (yes, I fell off my chair, too), but not in any modern browser so I was stumped.  To jump to the finish, since the title already stole my fire, I had the following

div#container {
  height: 100px !important;
  height: 115px;
  overflow: auto;
}

to deal with some height discrepancies between IE 6 and everyone else. The !important signifies priority to all browsers but <= IE 6, meaning they will render the element at that height, despite even in-line styles. However, I didn’t know that dynamic DOM changes are still superseded by !important properties – until now. I guess it makes sense, but I never realized the fact that DOM changes take place as in-inline style attributes, which are ignored by browsers when !important is used.

Good to know – however, I’m still going to use proven CSS hacks for IE 6. I just like my sites to function the same for as many users as possible, and I don’t think that alienating the IE 6 audience will make them switch – they are oblivious to the quality of your code and will just think you have a poor site and move onto the next.

P.S. Here’s the updated CSS (less dangerous, though more lengthy):

div#container {
  height: 115px;
  overflow: auto;
}

div#main-container > div#container {
  height: 100px;
}