Google Translate Flags Inside The Menu Bar (Ie Problem)

[krt]

Hi everybody,

I could manage to add google translator flags inside my menu bar but unfortunately it is looking nice only in chrome.

In ie, the flags are appearing outside the menu bar, not in the same menu line but in a new column at the end of the bar with large buttons associated to the flags.I appreciate if someone could give me a clue.The style and html used are this:

<style type="text/css">ul#menu{width:auto;height:30px;font-size:13px;font-weight:normal;font-family:Verdana, Helvetica, sans-serif;}ul#menu li{display:block;float:left;margin:0;padding:0;}ul#menu li a{display:block;float:left;color:#999999;text-decoration:none;font-weight:normal;padding:6px 25px 6px 25px;}ul#menu li a:hover{background-color:rgb(0,0,0);color:#ffffff;padding:6px 25px 6px 25px;}ul#menu li a.current{display:inline;background-color:rgb(0,0,0);float:left;margin:0;}.google_translate img {		filter:alpha(opacity=100);		-moz-opacity: 1.0;		opacity: 1.0;		margin:0;		border:0;		padding:3px 5px 3px 5px;		}		.google_translate:hover img {		filter:alpha(opacity=30);		-moz-opacity: 0.30;		opacity: 0.30;		margin:0;		border:0;		}		.google_translatextra:hover img {		filter:alpha(opacity=0.30);		-moz-opacity: 0.30;		opacity: 0.30;		margin:0;		border:0;		}</style><ul id="menu"><li class="button"><a href="http://ferhairstylist.blogspot.com/">Home</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/profissional-cabeleireira.html">A Profissional</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/portfolio.html">Portifólio</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/precos.html">Serviços</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/contatos.html">Contatos</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/mapa.html">Mapa</a></li><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="right" title="Italiano" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="right" title="Español" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="right" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><div 0px 0pxâ?? style="â??font-size:10px;margin:3px" 3px></div></ul>

[Ingolme]

You have to put them inside <li> elements. You can't have anything directly inside a <ul> except <li> elements.

[krt]

Hi Fox, thank you very much for your reply. I have changed the HTML like showed below but no progress in IE and now the flags are appearing like buttons in menu on Chrome. Before it were appearing flags as a single element.

 <ul id="menu"><li class="button"><a href="http://ferhairstylist.blogspot.com/">Home</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/profissional-cabeleireira.html">A Profissional</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/portfolio.html">Portifólio</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/precos.html">Serviços</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/contatos.html">Contatos</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/mapa.html">Mapa</a></li><li class="google_translate"><a href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="right" title="Italiano" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a></li><li class="google_translate"><a href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="right" title="Español" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a></li><li class="google_translate"><a href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="right" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a></li> <div 0px 0pxâ?? style="â??font-size:10px;margin:3px" 3px></div> </ul>

[Ingolme]

You can put all the flags into the same <li> element.

<li>  <a href="" ... .. ><img /></a>  <a href="" ... .. ><img /></a>  <a href="" ... .. ><img /></a></li>

[krt]

I have tried this way, in chrome they disappear and IE they stay the same.I am doing the test here: http://kjhsaiuh.blogspot.com/

[Ingolme]

The element is invisible because the <ul> element's height is not enough to contain the element. Remove the height declaration from the <ul>

[Krewe]

Looks the same in IE now, to me at least.You better than Foxy .

[krt]

Thanks Krewe but I could not reach this point without Fox's help.Now I need only to do the padding for the flags (padding:4 8 0 8) and the right alignment. I couldn't find where exactly should I put this parameters.I have tried in the style (.google_translate img) and in HTML. No success.Please Fox, one more hand and we finish it.Thank you so far.

[krt]

Looking more carefully I could note that the "li" object already have their parameters set witch includes the flags. Is it possible to set different parameters for the same li elements? Perhaps dividing the li in 2 diferent groups (the buttons group and the flags group). How can I do that?

[Ingolme]

Since you have a class attribute, you can target the <li> element with the class selector:

.button {  /* button style */}.google_translate {  /* Flag style */}

[krt]

Finish! I couldn't never done it without your help. This forum rocks!!!Thank you Fox!