Jump to content

Google Translate Flags Inside The Menu Bar (Ie Problem)


Recommended Posts

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>

Edited by krt
Link to post
Share on other sites

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>

Edited by krt
Link to post
Share on other sites

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>

Link to post
Share on other sites

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.

Edited by krt
Link to post
Share on other sites

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?

Edited by krt
Link to post
Share on other sites

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...