Question

I am calculating a padding offset from my css file with Jquery. I need it to be a integer value so I am removing the “px” part with the .replace() method.

//calculate left and right padding on element
var padding_offset = $('#projects_menu').css("padding").replace('px', '')* 2;

when I do an alert(padding_offset); in firefox it returns 0. In chrome, IE, Opera it returns the current offset minus the “px” part so in this case “20”.

Is this just a bug with firefox? What is the workaround here?

Answer 1

Shorthand CSS properties are not supported. As stated at http://api.jquery.com/css/

Shorthand CSS properties (e.g. margin, background, border) are not
supported. For example, if you want to retrieve the rendered margin,
use: $(elem).css(‘marginTop’) and $(elem).css(‘marginRight’), and so
on.

Since margin, padding, border and so on can have different values aswell as different units for each “sub property” this is really logical.