Alex Rivera | Logout

Problem with absolute positioning in Firefox and Chrome

Asked 2010-08-26T15:25:48.303
24

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?

html css firefox google-chrome css-position
Edit
Report

2 Answers

2

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.

answered 2010-08-26T17:53:12.730
-1

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.

answered 2012-09-06T04:11:43.613

Your Answer