2

When centering an element with auto, I'm finding different computed results between Firefox and Chrome.

div1 {width:100px; height: 100px; margin: 0 auto;}

When I check (with JavaScript) the computed style with either getComputedStyle or currentStyle, Chrome gives an actual number, in pixels, of how large the margin-left or margin-right is. Firefox, however, just posts as 0, even though the element is centered. How can I get the same posted results using JavaScript from Firefox that I get from Chrome?

added: I do not need to change the value, I need to calculate the value in pixels, so that I can dynamically place other objects that my have 'position:fixed' on the page

Dylan_F
  • 21
  • 2
  • @TylerH HUH? What are you talking about... – epascarello May 05 '14 at 18:22
  • @epascarello OP is experiencing browser-specific margins, so I suggested two ways to override the browser-specific margins. – TylerH May 05 '14 at 18:26
  • 1
    http://stackoverflow.com/questions/13455931/jquery-css-firefox-dont-return-auto-values – epascarello May 05 '14 at 18:28
  • @TylerH The OP is experiencing the fact the browser is not returning a value. – epascarello May 05 '14 at 18:29
  • I'm not trying to change the margins, I just need to dynamically find the pixel value of 'auto' cross-browser for other elements – Dylan_F May 05 '14 at 18:30
  • @user3597893 Ah, that was unclear. I'll suggest an edit then. – TylerH May 05 '14 at 18:30
  • If you could explain what you are trying to accomplish, instead of asking why aren't things working the way you want it to, maybe we could help come up with an alternate solution – Populus May 05 '14 at 18:39
  • I should add IE seems to follow the same pattern as Firefox – Dylan_F May 05 '14 at 18:39
  • I need to 'get' the distance from the left the object actually is, so that I can dynamically place 'fixed' objects in their desired location – Dylan_F May 05 '14 at 18:41
  • @Dylan_F you're just repeating your original question again. What is it you want to do? e.g. "I have a layout that is center aligned, but I want to have a float box on the right side of the page" – Populus May 05 '14 at 18:53
  • @Populus The browser returns the wrong value for auto when the OP tries to read the value. That is the problem and is a known issue. – epascarello May 05 '14 at 19:44
  • @epascarello calculating positions with generated values while using `margin: 0 auto` is adding complexity to problem which can most likely be solved in a different way. That is the point I was trying to get across. For example, if I were trying to solve my example question above "I have a layout that is center aligned, but I want to have a float box on the right side of the page" I wouldn't bother with margins, and instead put the "float box" outside of the centered element. – Populus May 05 '14 at 19:55
  • In fact, layout should not be done via javascript at all. Javascript should control the "state" of the layout and that would include animations (which is basically a transition state) – Populus May 05 '14 at 19:58
  • thanks everyone! I appreciate the insights – Dylan_F May 05 '14 at 20:35
  • The OP is setting the CSS margin to centre content on the page. Then he wants to find the new margin in pixels, not just "auto" which is what Firefox is returning. This is a common technique... – tomysshadow May 05 '14 at 21:07
  • a common, and bad technique. Is what I am saying – Populus May 05 '14 at 21:45

1 Answers1

1

I ran into this problem recently.

In firefox you can use jquery's offset() or position() methods to overcome this issue:

offset()

Get the current coordinates of the first element in the set of matched elements, relative to the document.

position()

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

Community
  • 1
  • 1
Zenvied
  • 73
  • 1
  • 5