CODEWITHSUNDEEP
csscross-browser
d3wannabe
d3wannabe

Reputation: 1317

Firefox/IE handling css "right" property differently?

I have a div like this...

<div style="position:fixed; top: 60px; right: -51px;">
      <form>
         ....
      </form>
  </div>

In Chrome/Safari, it perfectly positions a little search box at the top right of the screen.

In firefox/IE, the top is correct, but the position to the right isn't tight enough to the edge (looks like around 100px).

Here's an example: http://codepen.io/d3wannabe/pen/LZNVqe

Hugely appreciate any thoughts from anyone who knows why this might be happening!

Upvotes: 1

Views: 192

Answers (2)

Andrey
Andrey

Reputation: 1036

This is not about the right, but about width of .search-container — it is different in Chrome and Firefox, thus it appears like .search-box have different right gap across browsers (Firefox: https://i.sstatic.net/5hupX.png). You can use developer tools to inspect that in different browsers. If you want to have equal right gap you have to normalize content width within position: fixed div.

Upvotes: 1

HenryM
HenryM

Reputation: 5793

adding width:0px; and changing to right:0px seems to work?

Upvotes: 1

Related Questions