Как заставить margin-top дружить с Firefox?

Question

[Артём Сергеев]

Подскажите запарился, не получается подогнать картинку. В Chrome всё ок.

<style>

#ringz
{
 margin-top:-71px;
  margin-left:1020px;
 
}
#countz
{
  margin-top:-106px;
  margin-left:1034.5px;
}
.textcountz
{
 font-size: 15px;
  color: #fff;
 }

</style>


<div  style="position:inherit;width:29px;height:34px;">
<img  class="ringzz" src="../img/ring.png" id="ringz"  alt="Мои сообщения" title="Мои сообщения" /></div>

<div id="countz" class="textcountz" style="position:static;left:541px;top:262px;width:29px;height:34px;"><?php echo $num_mail; unset($num_mail); ?></div>

Что пробовал?:
x:-moz-any-link
схлопывания
bottom:0; right:0
Перерыл кучу буржунета ничего не помогает. png картинка не как не хочет вставать на своё место.

Comments

[Ankhena]

Выложите код https://jsfiddle.net/

Answer 1

[Philipp]

Поставьте внешнему блоку position: relative, а счетчику position: absolute и координаты.

Comments

[Артём Сергеев]

Когда я задаю position: absolute и координаты, то при масшабировани и смене разрешения экрана картинка уползает.

[Сергей]

Артём Сергеев: задай смещение в процентах например

[Сергей]

Артём Сергеев: или дай ссылку на свою страницу, глянем предметно

[Philipp]

Артём Сергеев: вы можете использовать современные свойства, такие как vv, vh.

[trushka]

Артём Сергеев, картинка уползает, потому что у родительского блока не задано position. Сделайте position: relative и картинка в нём будет как гвоздями прибита))

Answer 2

[Сергей]

для таких целей принято использовать позиционирование
#ringz - position:absolute;
#countz - position:absolute;
контейнеру position:relative;