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.