css Positions are not same in mozilla and chrome

Question

I have used the below inline style for img tag. but the positions are different in mozilla and chrome.

element.style {   position: absolute;   top: 118px;   LEFT: 64px; }

In Mozilla image is displayed properly. But in chrome the images are scattered

why is it happening like this.? How can I fix this issue?

Answer 1

used one div wrapper for position relative like that:-

  <div style="position:relative">
     <div style="position: absolute; top: 118px; LEFT: 64px;"></div>
  </div>

Answer 2

Here is what I did to use position absolute on an image within a fieldset. From here, change your right and top positioning to make it work for you in Firefox. (leave your original class in place for IE, Chrome, Safari, Opera)

@-moz-document url-prefix() { 
  .classToApply{
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

This is a Firefox Hack that I'm told works for every version of Firefox. I'm using Firefox Version 33.0.2, so I can't confirm this works on older versions. I had the same problem on my site. It looked the same in IE, Opera, Safari, and Chrome. It was only in Firefox I noticed the positioning different. This works!