Hiding Google Translate bar - css

Question

I have the following code:
<div style="" class="skiptranslate">
<iframe frameborder="0" style="visibility:visible"
src="javascript:''"
class="goog-te-banner-frame skiptranslate"
id=":2.container"></iframe>
</div>
I need to hide it but if I only hide the goog-te-banner-frame using:
.goog-te-banner-frame {
display:none !important
}
It still throws my header down. If I use this:
.skiptranslate {
display:none !important
}
It also hides the language selection dropdown because it shares the same class.
I'd like to hide the skiptranslate div that CONTAINS the goog-te-banner-frame.
How do I do that?
Edit:
This is actual code to "create" the translate div above:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false,
includedLanguages: ''}, 'google_translate_element');}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 1

Ok, this works for some reason:
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}

Answer 2

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.

Answer 3

This works for me:
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}

Answer 4

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; }

Answer 5

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/

Answer 6

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); }
}
);

Answer 7

October 2022: None of the above answers worked in my case.
I made it work by simply changing the z-index: of my website's menus, after I found the z-index: of the google translate's iframe (using of course the Developers Tools).

Answer 8

It works for me.
.goog-te-gadget img{
display:none !important;
}
body > .skiptranslate {
display: none;
}
body {
top: 0px !important;
}