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:

<fieldset class="passenger-info">   <legend>Passenger 1</legend>   <div class="remove-me">     <img src="/images/delete-icon-sm.png" />   </div> </fieldset> 

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 post shows that FF does indeed have problems with rendering fieldsets.

http://www.codingforums.com/showthread.php?t=132624

Is there a better way of doing a fix without using a browser specific hack?

Answer 1

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!

Answer 2

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.