Javascript code broken in firefox browser only-CodePudding

I created a div C.

Its absolute position is setted to stay between the bottom margin of div A and top margin of div B.

Every div is a rectangle with same width.

C is a less hig than A and B. I use this solution in order do "hide" the seam between the two background image of A and B by covering the area where their margins meet one another. C has a backgorund image itself.

I manage these settings usign Javascript code insert in the right place of a WP theme Dashboard (Uncode theme, I didn't use Javascript pligin).

It's all right with all browser (I tried a LOT of browsers, mobile version too) but Firefox. I really can't understand why.

The code is:

var divTop = document.getElementsByClassName("A")[0].clientHeight;
var divWidth = document.getElementsByClassName("A")[0].clientWidth;
var Gap = document.getElementsByClassName("C")[0].clientHeight/2;
document.getElementsByClassName('C')[0].style.top=divTop-Gap   ".px";
document.getElementsByClassName('C')[0].style.width=divWidth   ".px";

U can verify by yourself: https://www.dolomitiinebike.it/

The website works well in every browser but opening it with firefox, everything is broken.

CodePudding user response：

I solved installing a plug-in for adding Javascript and Jquery scripts (JS Inserter) and then I translate the code from Javascript to Jquery. I add the script infooter section. This solution is compatible with Firefox too.

var topHeight = jQuery('A').outerHeight();
var width = jQuery('A').outerWidth();
var gap = jQuery('C').outerHeight()/2;
jQuery('C').css({ top : topHeight - gap   "px" }); 
jQuery('C').css({ width : width    "px" });