Question posted in 
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
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
reminstead ofem, you need it for this workaround to work easier. First you have to set thefont-sizeof.infographicto zero. Every element inside your.infographicwill now become afont-sizeof zero because you’re usingem. That’s the reason why you should now change torem, at least for the elements inside.infographic.Now you’re done.
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
#infographicand take off themargin-top:-100%;. Depending on how you use the#infographiccontainer this solution might not be ideal for you, but at least something to consider to help solve your issue.