Google site translator breaks stylesheet

Hi guys.
I'm adding Google site translator to a site and I see a strange effect. You can see it in the 2 pages below, which are the same page but the first is the original one and the second is the one I added Google plugin to:

certificaciones original page
certificaciones with Google site translator

Any idea?
LVL 32
Marco GasiFreelancerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Randy DownsOWNERCommented:
The only difference I see in Firefox is the background.
Randy DownsOWNERCommented:
original is just
<body>

Open in new window


2nd version has this for body
<body style="background: #000044 url() center center no-repeat;	-webkit-background-size: cover !important;background-size: cover !important;">-->

Open in new window

Marco GasiFreelancerAuthor Commented:
Thanks for your reply, Randy.
I'm sorry, I would have been more clear. The problem is the background. The difference is visible in Chrome in Edge and IE10 too.
But you have checked my certificaciones2 during my experiments: what Google attach to body is this:

<body style="position: relative; min-height: 100%; top: 40px;">

Open in new window


If I remove the translator, these styles disappear too and the background looks as I want, cover size.
But if you comment out them using Developer tools or Firebug, nothing change. Loading the page, it appears the right way until Google translator is attached and displayed: this turn the background preventing it have size = cover.
I can solve my problem setting background position to fixed and adding the !important clause, but this force me to have a different background style. I even tried to put all those rules in my stylesheet setting them as important, but with no result.

Not only! I've just saw that adding Google translator produces an error message in Firebug console:

TypeError: a.getElementsByClassName is not a function
http://ejemplos.webintenerife.com/buceorincondearona/assets/js/wow.min.js
Line 2
It seems we should be able to prevent any script to attach inline styles to our DOM elements, but this is impossible...
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Marco GasiFreelancerAuthor Commented:
The error has just gone away: ???
Remains the problem of the cover background...
Randy DownsOWNERCommented:
So the issue is translator adds this?

style="position: relative; min-height: 100%; top: 40px;

Open in new window

Randy DownsOWNERCommented:
Maybe you can adapt this. I am assume that translator is changing CSS to add the dropdown.

/* Google Translate Overrides */
html, body{
    min-height: 0!important;
    height: auto!important;
    position: inherit!important;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Marco GasiFreelancerAuthor Commented:
Fantastic: I had never added html, just body, and i had never set the height, but just the min-height, since it was Google added to my body tag.
Your solution works perfectly. Thank you very mutch!!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.