Prevent Google Translator from changing height of html to 100%

Question

I added a Google Translator widget to a site (using the code provided here: http://translate.google.com/translate_tools) and have the following issue:

It automatically adds a style attribute to the html tag whose value includes:

height: 100%

This is "breaking" the page layout. For example, CSS backround images that were positioned to "bottom" are now (incorrectly) positioned at the bottom of the view port.

Is there any way to prevent or fix this?

Therefore

Answer 1

This resolves the issue:

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

Karol

Answer 2

I was able to solve this by setting the body min-height attribute in css as !important to prevent override.

body {
min-height: 0 !important;
}

UPDATE - Unfortunately, this no longer works. The Google Translation script will strip out any attempts you make to counter it's min-height style. I have both the above CSS in my stylesheet AND an inline style on the body tag.

The Google Translation script is pretty aggressive and I'm not seeing any way to disable this.

Proven

See my comment below for a solution :) – Potentate

Answer 3

This should work:

html {
  height: auto !important;
}

body {
  position: initial !important;
  min-height: initial !important;
  top: auto !important;
}

Gyron

Answer 4

maybe it's like

body{ height: auto !important; }

Tyson

Answer 5

do not write css in head part, write in a css file. this will preventing automatic translation by google.

Cheese

Answer 6

I tried using the solutions provided by the other answers, but they didn't work for me. If anyone else is having this issue, I did have success with this solution.

body { position:static !important; min-height:100%; top:0; }

Womanly

Answer 7

I found a way to solve this issue, it's not bulletproof I guess but works for now:

Plugin: http://darcyclarke.me/dev/watch/

with this code :)

$(window).load(function(){
        $('body').watch('min-height', function(){
            var style = parseInt($('body').css('min-height'));
            if(style > 0){
                $('body').css({
                'min-height' : '0',
                'position' : 'static',
                'top' : 'none'
                });
            }
        });
});

Potentate

I just tried the demo for the watch plugin at darcyclarke.me/dev/watch and it killed my browser. looks like it puts something into an infinite loop. it's a nice idea though. – Enphytotic

Answer 8

The only way I can see to combat this is to put a timeout of 500ms on code to reset the body min-height property. If you're not to bothered about your page jumping around a little for half a second on load, it works. Using jquery, it would look something like this:

$(function(){
  var myMinHeight = 950;
  setTimeout(function(){$('body').css('min-height',myMinHeight)},500);
});

Set the value of myMinHeight to whatever you wish it to be.

Enphytotic