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?
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?
Randy Downs
The only difference I see in Firefox is the background.
original is just
2nd version has this for body
<body>2nd version has this for body
<body style="background: #000044 url() center center no-repeat; -webkit-background-size: cover !important;background-size: cover !important;">-->ASKER
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:
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...
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;">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...
ASKER
The error has just gone away: ???
Remains the problem of the cover background...
Remains the problem of the cover background...
So the issue is translator adds this?
style="position: relative; min-height: 100%; top: 40px;ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!!!
Your solution works perfectly. Thank you very mutch!!!