Problem with absolute positioning in Firefox and Chrome

user_334545 0
Viewed 48118

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?

css-position firefox google-chrome css html
9 Answers

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;
  }
}
user_26427870
Related