CODEWITHSUNDEEP
htmlcsspositioningcss-position
Sven
Sven

Reputation: 13275

Webkit/Firefox - position absolute of image

H!

I have an issue with the positioning of some elements in webkit-browsers and firefox.

In Safari/Chrome, it looks like I want it to be:

enter image description here

But in Firefox, it looks like this:

enter image description here

Code

HTML 

<ul>
  <li>
    <div class="img">
      <a href="#">
        <img src="#" />
        <p><span class="circle"><img src="white-circle.png" alt="" /></span></p>
      </a>
    </div>
  </li>
</ul>

CSS

li {
  position: relative;
}

p {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: black;
}

p img {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35%;
  margin-left: -35%;
}

Any idea what's going on there? Does Firefox interprets the position: absolute differently?

Upvotes: 1

Views: 945

Answers (2)

Venkat
Venkat

Reputation: 314

When you use absolute positioning firefox seems to always move things differently to Chrome and Safari. My opinion is 

    p img:{position: relative;}

(relative positions is fine its only when i use absolute).

Good Luck

Upvotes: 1

Sven
Sven

Reputation: 13275

Apperently, some other messed up CSS rule was at work there. As a temporary fix I used this guide to find a solution working in Firefox.
Probably it's some rule affecting all images, but I could'n find it right now.

Upvotes: 0

Related Questions