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?

Reviewer

HTML would be more helpful, I'm guessing that what you pasted as structure is Ruby? – Defloration

yup haml, its more like pseudo code for html but yeah i guess i could give it an edit – Reviewer

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!

Oof

this works for me. although i have the default top set outside @moz-document url-prefix() – Helmer

For those who come across this, try putting .remove-me on a parent div, to your absolute positioned element. I did not need to included position: absolute; but I did have to include the border 1px solid #FFF – Sheryllshetland

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.

Microscopium

Answer 3

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.

Lowelllowenstein

im using compass/blueprint framework and yes i always reset, so it's not the margin. and that * is a bit overkill, i use eric meyer's reset instead – Reviewer

Answer 4

I have used @media screen and (-webkit-min-device-pixel-ratio:0) {} and fixed my absolutes that way. Its not very dry but it works.

Cestode

Answer 5

I think it is because you didn't indicate the height of the div (passenger-info) that contains the button; Chrome starts acting up when you don't specify this.

Diatomite

Answer 6

The real solution is firefox and ie don't set defaults for top, left, right, and bottom.

I was able to fix my problem by setting these properly.

Cicero

Answer 7

Instead of using margin use left, top, right, bottom. Example:

position: absolute; top: 10px; left: 20px;

Mcclimans

Answer 8

Using a feature query against one of mozilla's platform-native properties is probably the correct approach for this in 2020. -moz-appearance is one such property, but others would work as well.

@supports (-moz-appearance: none) {
 .remove-me {
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

Euryale

Answer 9

I had a similar problem with a web site and the images in Chrome where wrong. I had the position in an image and an input box in the same way as your example at the beginning of this post, and I solved it by putting the absolute position in the input box and in the image position in relative coordinates.

When I do that, it changes both positions but puts margins in both. I got it where I want it, to solve this problem with Firefox an Chrome you have to follow some of these tricks in order to put the images in the right place. Play with the position to make it work.

Loosestrife

-1: it is hard for me to estimate how helpful your answer is, but I'm getting you -1 for suggesting a change, which, if I understood correctly, will probably break the result even more and that could be fixed by 'some of these tricks' - which you did not care to point out.. Please write a bit clearer and try to be more specific. – Anet

Clarify "some of these tricks". Also, it is almost never correct to state you have "problem with Firefox and Chrome" - they behave well. The browser that behaves badly is Internet Explorer – Blast