Problem with absolute positioning in Firefox and Chrome

I can't believe this is 4 years old and still not answered. I searched every where for this answer. 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() {   .remove-me {    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!

It appears that Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.

One thing you could do is add a div wrapper and then absolutely position the element in the top right of the wrapper so that it lays over the corner of the fieldset.

It appears that the .remove-me element might have margin. Make sure to to remove that prior to adding absolute-positioning to items.

For precise results, you should always do a 'reset' in your CSS. This means removing margin/padding from every element.

A simple reset:

* { margin: 0; padding: 0px; }

Put that at the top of your CSS.