jQuery css function not working across all browsers

Question

Given this HTML, CSS, and JavaScript: http://jsfiddle.net/XvqYS/3/

If you run it on Google Chrome it alerts

10px

Running it on IE, Safari, or FireFox alerts and empty string. Why?

I'm using IE9, Chrome 18.0.1025.168, FireFox 12.0, Safari 5.0.4

Answer 1

Individual properties, such as margin-left have to be used.

The basic method to read all properties is: http://jsfiddle.net/XvqYS/8/

$(function () {
    var $main = $("#main");
    var margin = [
        $main.css('margin-top'),
        $main.css('margin-right'),
        $main.css('margin-bottom'),
        $main.css('margin-left')
    ].join(' ');
    alert(margin);
});

You can tweak it to return a compact value, eg. 10px 10px 10px 10px -> 10px.