get the auto computed margin in firefox with jQuery

Question

With the markup and css below, I tried to get the computed left-margin of shell.

 <section class="page-title">
      <div class="shell">
        <h5 class="title">Welcome!</h5>
      </div>
    </section>

.shell {
  zoom: 1;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Using

parseInt($('.shell').css('marginLeft'))

it works in Chrome, Safari, IE9 but surprisingly doesn't work in Firefox. Tried the other approach:

($('.shell').outerWidth(true) - $('.shell').outerWidth()) / 2

Also works well but Firefox. So I guess firefox doesn't support to obtain the undefined css with jQuery? A straight forward way to work around with it is:

($('.page-title').width() - $('.shell').outerWidth()) / 2 

But I wonder if there is a better way.

Answer 1

When you say it doesn't work, do you receive errors (in the console) or does it return 0? Returning 0 for the auto setting is, apparently, an issue with different browsers.

You could use the lightweight jSizes library which returns all metrics in pixels. This will save you having to faff around with outerWidth, etc..