How a JS Push-Down Header May Be Kept from Affecting Fixed-Position Elements

Question

I have a website that I installed a "ManyContacts" email contact form on. What it does, is, after about 2 seconds it pushes down the content of the site just enough to reveal the contact header form.

Problem is, I had two things in fixed-position at the bottom of the screen (a picture-link to a discussion board, and an rss-feed icon), and when that bar appears, it shoves them nearly or completely off the bottom of the viewport.

My website is http://www.RoofRinseRun.com if anyone is able to help me with this. I feel fairly confident with html & css, but I don't know much anything about JS. Thanks!

By the way, the script for "ManyContacts" is very near the end of the html, and the html code for the two fixed-position items is just below the code for the "ManyContacts" form. You may also need to reference my new.css file.

One last thing. To help you see what I'm talking about, you can go to my site, and try toggling the "ManyContacts" bar on and off the screen with the little arrow in the top right hand corner. And of course, to view the code, you can right-click and choose "view page source;" also, within the html code, near the top, in the header, you can click the link to "...new.css" to see my css file (and then right-click again and choose "back" to get back to the html).

Answer 1

The problem is that manycontacts.min.js is adding inline styles to your .discussion-board and .rss-feed in Firefox and possibly other browsers too. (I only tried Firefox and Chrome. It is not adding any inline styles in Chrome, so your website looks fine in Chrome.)

You can fix it by adding top: auto !important to both .discussion-board and .rss-feed in new.css.