Banner's height shifts and goes over content, only with Firefox browser

Question

This is a random page in my site where the behavior takes place. ( http://accountabletest.com/services/) Notice how the banner's height shifts and goes over content. The issue happens only in Firefox, not in Safari, Chrome or even IE (IE used to make a weird effect too, but when I replaced the % with specific px quantities, the issue stopped). All subpages but the homepage are affected. I don't know why is this happening. The issue takes place in small screens and also in big ones (I use a media query for min-width=144px).

Answer 1

Hi again!
I've arranged the '''DOCTYPE declaration''' and also '''removed the Javascript code''' entirely from the code (''wasn't needed, but was included in the template''), as mentioned by '''@jscher2000''' .
Moreover, I've checked the margin of the div.headwhite2 (margin-top:-5% -> 8%), and '''replaced the % with accurate pxs''', as recommended by '''@cor-el'''. Did also tried switching the banner's heigh (then I returned to how it was, because no changes were seen on the issue).
The problem persists: Banner's height '''switches upon reload '''and the div 'headwhite2' '''moves down''' while moving the poiner over the sidebar's links.