Dividers/Layers Show Space in Firefox

[Argent Arts]

Hello. I am creating a website that is using layers with dividers at the top and the bottom. Layers are NOT nested. One layer will be flush against another going from top to bottom, each as a container for some text and images. Each layer has a divider at the top and the bottom. In Chrome, the page looks perfect no matter which breakpoint I view the page at. In Firefox, there are spaces between most of the layers/dividers depending on which breakpoint I view it at. Here are a few screen shots to show what I am seeing:

Chrome:



Firefox:



Just tested and it's showing the gaps in both IE11 and MS Edge, too. So, only Chrome is displaying the page correctly (or as it is shown in Web Builder's view).

EDIT:

It actually looks like the divider is up a pixel or two from the bottom of the layer's edge. I can see a thin strip of the layer's background image showing between the bottom divider and the top of the next layer. So, the bottom divider does not appear to be flush at all times. The top dividers appear fine (from what I've seen).

[Pablo]

To be able to help you I need to see the project file.

[Argent Arts]

Here's a sample project file:

http://www.argentarts.com/uploads/divider_gap.rar

It consists of one page with two layers. The top layer has one divider at the bottom. The second layer has two dividers, one at the top and one at the bottom. When previewed in Chrome, they are flush (no gap between the layers). When previewed in Firefox, there is a thin line between the dividers.

[Pablo]

Thanks for the project.
However, I do not see the space in any browser on my computer.

As you can see in the source code there is no gap, the shapes are positioned with absolute coordinates.
Maybe it's a rounding error of the browser?

[zinc]

Pablo, I can see the spacing in Chrome as well. I know @crispy68 has a similar extension which had the same issue and he fixed it, It might be worth asking him.

[Pablo]

I do not see this on any of my test computers.
But I think it's a rounding error of the browser. I am not sure if there is anything you can do about it other than overlap the two layers.

[Argent Arts]

Yep. I ended up fixing it by moving each layer so that it overlaps by just one pixel. Thanks for looking into this.

[Williams]

Pablo, I can see the spacing in Chrome as well. I know @crispy68 has a similar extension which had the same issue and he fixed it, It might be worth asking him.

Yes same here, i can see the speacing in chrome. hopefully crispy68 has the answer..