FireFox 4 jQuery document height and width

I ran into a little problem the other day. I had some jQuery goodness running along just fine and dandy. Everything was Jake while using Chrome and Internet Explorer 9 and FireFox 3, but when I looked at the site using FireFox 4, it didn't work right.

After some aggravating trial and error, I discovered the culprit. See, in the jQuery documentation, they say you can use two methods to get the height and width of a document:

$(document).height();
$(document).css('height');

The former gives you just the pixel numbers, while the latter is supposed to give you the entire CSS height (i.e. "450" for the first, and "450px" for the second). The problem is, that FireFox 4 doesn't recognize $(document).css('height') - or width for that matter. So you have to get it with just the .height() command, and append 'px' to the end of it.

CSS funkiness with Firefox

Normally, I check page layout and styles in IE and in Firefox. These two, I've found, have pretty much been good. If it works in those, it works usually in Chrome and Opera as well. I never check Safari, frankly that browser just slows down my system. My advice to folks using Safari is pretty much "use something else".

Anyway, I was fitting a checkbox today, and cursed a little under my breath when it didn't show up properly positioned in IE9. It's possible that if I'd been using IE8 or even IE7, I might not have found this, since those pretty much handle CSS in the same manner as Firefox. To be honest, I was ready for this to be IE9's fault, so I fired up Chrome and Opera to verify my assumptions. You could have knocked me over with a feather when the page rendered in Chrome and Opera just the same as it did in IE9. It was Firefox that was the problem.

Now, I'm used to making exceptions for IE, so I had to do a bit of research on how to do it with Firefox, and this is what I found:

<style type="text/css">
.complete-checkbox
{
        position:relative;
        top:23px;
        display:block;
        float:right;
        color:white;
        font-weight:bold;
}

@-moz-document url-prefix() {
        .complete-checkbox-ff
        {
                position:relative;
                top:0px;
                display:block;
                float:right;
                color:white;
                font-weight:bold;
        }
}
</style>

Essentially, I added a second class specifically for Firefox and used those properties only if the browser is Mozilla.