Problem with absolute positioning in Firefox and Chrome

Question

I don't understand why FF and Chrome render my page differently. Here's a screenie of it in firefox: firefox example http://grab.by/65Bn and here's one in chrome chrome: chrome example http://grab.by/65BB fieldset has a relative position and the image has an absolute position. here's the basic structure: ```

Passenger 1

``` basically the image is declared right after the legend. here's the css for fieldset: ``` .passenger-info { background:none repeat scroll 0 0 #F2F2F2; border:1px solid #9D240F; display:inline; float:left; margin-bottom:10px; margin-right:10px; padding:3px 10px; position:relative; width:350px; } ``` and for the remove-me image: ``` .remove-me { border:1px solid red; position:absolute; right:0; top:0; } ``` it's totally weird. I tried putting the fieldset padding out, and the image moves up a little, but still not at the corner. This p…

Accepted Answer

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!

Problem with absolute positioning in Firefox and Chrome

Solution

Problem