skip to Main Content

I’ve been looking at this small issue for a while and I can’t seem to fix it. It’s an firefox only bug it’s fine in IE Chrome etc.

This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.

As you see the Black colour is slightly more down, I can’t seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens’t seem to help either, (did this locally).

If you open the pictures in photoshop or w/e they’re exactly aligned.

Anyone have any idea why it goes wrong on Firefox only?

–> example
Removed the example since it’s a website.

2

Answers


  1. It’s because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn’t. You can use this workaround:
    Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you’re using em. That’s the reason why you should now change to rem, at least for the elements inside .infographic.

    Now you’re done.

    Login or Signup to reply.
  2. Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search