Why does jquery/css require a 'px' for the top property, but not for the width or height property?

Question

I have the following piece of javascript/jquery code:

 var some_div = $('<div>', {});

 some_div.
    css('position', 'absolute').
    css('width' , '100').
    css('height', '100').
    css('top'   , '100px').
    css('background-color', '#ddf');

 some_div.appendTo('body');

which works as expected in that it positions some_div 100 pixels from the body's top and also sets its width and height to 100 pixels.

If I change the line with the top property to css('top' , '100'). i.e if I omit the px, then the box disregards the specified property. Obviously, the px is required for the top property to take effect.

I am wondering why I don't have to specify the px for the width and the height of the box.

Answer 1

Having perused the source code, it looks like a jQuery quirk rather than a browser or CSS oddity. jQuery's css function does most of its preprocessing on your supplied value in this function.

The function deals with certain CSS oddities and input oddities in various ways. One way is to convert numbers into strings by adding "px". This never applies in your case because you supply strings.

jQuery also has a set of hooks which are called on CSS values before setting them on the DOM node. Your width and height values are being augmented here to take into account IE5.5's box model and the px being added by setPositiveNumber().

Conclusion: Omitting the 'px' from your top, bottom, left, right, width and height styles is invalid CSS. Since jQuery is modifying your attributes to support antiquated browsers and numerical values, you are getting away with invalid CSS in your width and height attributes by omitting the "px"!

The following will work:

css('top' , 100)