jQuery css function not working across all browsers

css, jquery

Solution

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`.

Problem

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

Original source