Debugging With IE's Developer Toolbar
The trouble with tools like IE's new developer toolbar is knowing how (and when) they are most useful. If you've never had call to use one it's hard to see how useful they can be. Well, here's a good example of it proving its worth. No sooner had I found this toolbar than Nico had posted a question about the fake Action Bar code that made me curious.
Nico's example page worked in Firefox. However, in IE 6, the main content of the page didn't appear. To find out why I started the DOM Explorer and located the layer called "scrolls" in the document tree. You can see the blue horizontal line in the picture below. This is IE showing us the selected layer. So, it's there, but it's not very tall.
Look at the attribute of the layer that I've highlighted in a red box. The CSS for the layer has set the height to be 0px. No wonder we can't see it. The CSS to work out the height for the layer is this line:
height:expression(document.body.clientHeight-95);
CSS Expressions are a handy feature of IE that let you calculate CSS properties with simple JavaScript. Other browsers just ignore them. In this case Nico wants the layer to be as high as the whole browser minus the height already taken up by the layer above it (95px).
The reason it didn't work is to do with the way document.body.clientHeight works. A quick Google found this page which explains all. In most cases document.body.clientHeight returns the height of the browser. Apart form standards compliant mode in IE 6 where it returns the height of the document. Nico's page is in compliant mode because of the DOCTYPE he's used at the top of it. So, document.body.clientHeight at the point where the main layer is rendered will return the height of what's above it. In this case the layer that's 95px high. So the expression evaluates 95px-95px = 0px.
There are two solutions to this. First is to remove or change the doctype so it's not in "standards mode" (using Domino would fix this). The other option is to use document.documentElement.clientHeight instead.
So, there you go. It's actually quite easy to fix seemingly bizarre problems once you have the right tools at hand.
Skip to the 
You can subscribe to an individual
Good bit o research, Jake. I must admit I'm confused that this works in Firefox at all. I was reading just this morning that 'expression' vas an IE only CSS ability.
(Courtesy of Maarten Doctor - Top 10 CSS tricks at Webcredible.co.uk)
{Link}
So, from your example, I guess expression is now a standard(?) supported by firefox.
Not quite Jerry. The CSS for that page contains some code for Mozilla browsers and some code for IE. CSS Expressions don't work in anything but IE.
The scrolling works in Firefox because the CSS contains position:fixed for the topmost layer, which it supports. IE doesn't support it and that's why we need the extra expression()s that add overflow and height settings to the bottom layer.
Does that make more sense?
Using Domino won't necessarily put you in quirks mode either, since there's an INI entry that will include the (unnecessary) URL to the loose.dtd location. (Unnecessary because the browser does not use a validating parser for HTML -- heck,it doesn't even demand well-formedness, let alone validity.)
Yes, thanks Jake. Confusion cleared.