jquery margin problem with chrome 6

Question

I have a problem with jquery (1.4.2) and chrome 6

margin-left:auto
margin-right:auto

$(id).css('margin-left');
$(id).css('margin-right');

both return a px value(ex: 327px)

Answer 1

This happens because when specifying margin:auto, Chrome (and also Safari, as they both use WebKit) sets computed value of margin-left and margin-right to an equal sized used values.

While Firefox and IE sets computed value of margin-left and margin-right to 0px. So if you have a 1000px wide page and your element takes 50% width (i.e.: 500px) and has margin:auto, then Chrome will set element's computed value of margin-left and margin-right to 250px (so it fills all the empty space between element's border edge and its parent element's content edge with margins and by so horizontally centers the element).

However, Firefox and IE will set computed value of margin-left and margin-right to 0px, so there is no margins between the element's border edge and its parent element's content edge but it is still centered. You can actually see it happening using Firebug in Firefox and Developer Tools in Chrome. In depth explanation can be found here:

http://www.3d3r.com/simon/marginAutoComputedValue

from smnh answer under jQuery position page

---

remember that you can have more control with dimensions using .position() and .offset()

$(id).position().left

or do you really want the MarginLeft ?