Firefox computed margin auto returns 0

Question

I have a div which is centred horizontally with css :

.bar {
    height: 38px;
    width: 970px;
    margin-left: auto;
    margin-right: auto;
}

I need to have another element to have same margin from the right as .bar, so I'm using jQuery sizes for this :

<div class="spec">I need to be aligned the same.</div>

JS:

$(".spec").css('margin-right', $('.bar').margin().right + 'px');

This works, but not in Firefox 30.0, as it returns 0 for computed margin-right of .bar. Any suggestions ? http://jsbin.com/difobu/1/edit.

$('.bar').css('margin-right') return 0px in FF 30.0 as well. If you donwnvote please provide an explanation.

Answer 1

Unfortunately, this comes down to browser differences. To quote an answer to a similar problem:

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

So you're kinda screwed. You have a few options to make this consistent.

You can reliably return auto by hiding the element before you compute the style. Something like this might work:

var $bar = $('.bar');
$bar.hide();
var barMarginRight = $('.bar').margin().right; // "auto"
// do whatever you need to do with this value
$bar.show();

You can also use jQuery's $('.bar').offset(), which returns properties you might be able to use.

// This might not be exactly what you want, but...
$('.spec').css('margin-left', $('.bar').offset().left + 'px');

You can also try to fix the problem with CSS, though we'd need to see your whole page to decide about that.