I have the following code:
Ok, this works for some reason:
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
I found this to work the best for me. I send the Google Translate "origninal text" tooltip to z-index: -1000. So it is still in the page, but out of sight.
// Force hiding of "original text" popup for menus, etc. (very annoying)
jQuery(selector).bind(
"mouseenter mouseleave",
function (event) {
if (event.type === 'mouseenter') { google_trans_tt.css('z-index', -1000); }
else { google_trans_tt.css('z-index', 1000); }
}
);
Try to add another class, say .myClass {display: none;}
, append to skiptranslate, like class="skiptranslate myClass"
EDIT:
Another solution:
You can also wrap the google translate code with another div, say <div id="google-wrapper">... google translate code...</div>
and then style the wrapper with display: none;
OR
See this fiddle: http://jsfiddle.net/SryPD/
Why don't you just add an id to the skiptranslate
div that holds the goog-te-banner-frame? <div id="something" class="skiptranslate" style="">
will then allow you to style div#something { display: none !important; }
http://thoughtsforbeans.blogspot.in/2012/08/translate-your-website-with-google.html#.Unx4jfmnqQA
Its working Fine with the link of this code. I fixed on my site.
The selected answer is wrong!
I know this is an old question, but for anyone coming across this problem in the future, the easiest way:
body > .skiptranslate {
display: none;
}
Since the iframes are dynamically added directly to the body, you can simply select only direct descendants and nothing deeper.