krt Posted December 11, 2011 Share Posted December 11, 2011 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> Link to comment Share on other sites More sharing options...
Ingolme Posted December 11, 2011 Share Posted December 11, 2011 You have to put them inside <li> elements. You can't have anything directly inside a <ul> except <li> elements. Link to comment Share on other sites More sharing options...
krt Posted December 11, 2011 Author Share Posted December 11, 2011 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> Link to comment Share on other sites More sharing options...
Ingolme Posted December 11, 2011 Share Posted December 11, 2011 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 comment Share on other sites More sharing options...
krt Posted December 11, 2011 Author Share Posted December 11, 2011 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/ Link to comment Share on other sites More sharing options...
Ingolme Posted December 11, 2011 Share Posted December 11, 2011 The element is invisible because the <ul> element's height is not enough to contain the element. Remove the height declaration from the <ul> Link to comment Share on other sites More sharing options...
Krewe Posted December 11, 2011 Share Posted December 11, 2011 Looks the same in IE now, to me at least.You better than Foxy . Link to comment Share on other sites More sharing options...
krt Posted December 11, 2011 Author Share Posted December 11, 2011 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. Link to comment Share on other sites More sharing options...
krt Posted December 11, 2011 Author Share Posted December 11, 2011 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? Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2011 Share Posted December 12, 2011 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 comment Share on other sites More sharing options...
krt Posted December 12, 2011 Author Share Posted December 12, 2011 Finish! I couldn't never done it without your help. This forum rocks!!!Thank you Fox! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.