Joomla.it Forum

Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : DCweb 30 Mar 2012, 21:01:06

: CAMENIAN - Visualizzazione errata menù in IE
: DCweb 30 Mar 2012, 21:01:06
Come da titolo, ho un sito (http://allriding.it/) in Joomla 1.5 con montato il template CAMENIAN
Ho notato che in IE il menù si imposta in verticale…qualche suggerimento per risolvere questo problema?


Ecco il css:


:
#navigation {
  float:left;
  width: 100%;
  margin-top:2px;
  margin-left:0px;
}
@font-face {
  font-family: 'PortagoITC TT';
  src: url(PortagoITC_TT.eot);
  src: local('PortagoITC TT'), url('PortagoITC__TT.ttf') format('truetype');
}
#navigation ul {
  list-style: none;
  margin:0;
  padding:0;
  float: left;
}
#navigation ul ul {
  margin: 0; /* all lists */
  padding: 0;
}
#navigation ul li {
  font-variant: small-caps;
  font-family: PortagoITC TT, Trebuchet MS;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 15px; /*spaziatura menu*/
  padding: 0;
  float: left;
  list-style: none;
  background: none;
  display: block;
}


#navigation ul li ul {
  width: 200px;
  position: absolute; /* second-level lists */
  z-index: 99;
  left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  height: auto;
  width: 200px;


}


#navigation ul li ul ul {
  margin: 0; /* third-and-above-level lists */


}


#navigation ul li li {
  padding: 0;
  margin: 0;
  width: 100%;


}


#navigation ul ul a {
  width: 100%;


}


#navigation ul li:hover ul ul,
#navigation ul li:hover ul ul ul,
#navigation ul li.sfhover ul ul,
#navigation ul li.havechildsfhover ul ul,
#navigation ul li.havechild-activesfhover ul ul,
#navigation ul li.activesfhover ul ul,
#navigation ul li.sfhover ul ul ul,
#navigation ul li.havechildsfhover ul ul ul,
#navigation ul li.havechild-activesfhover ul ul ul,
#navigation ul li.activesfhover ul ul ul {
  left: -999em;
}


/* This "unhides" the sub-menus (left: -999em is what hides them) */
#navigation ul li:hover ul,
#navigation ul li li:hover ul,
#navigation ul li li li:hover ul,
#navigation ul li.sfhover ul,
#navigation ul li.havechildsfhover ul,
#navigation ul li.havechild-activesfhover ul,
#navigation ul li.activesfhover ul,
#navigation ul li li.sfhover ul,
#navigation ul li li.havesubchildsfhover ul,
#navigation ul li li.havesubchild-activesfhover ul,
#navigation ul li li.activesfhover ul,
#navigation ul li li li.sfhover ul,
#navigation ul li li li.havesubchildsfhover ul,
#navigation ul li li li.havesubchild-activesfhover ul,
#navigation ul li li li.activesfhover ul {
  left: auto;


}


/* STYLING THE MENU
-----------------------------------*/


/* 1st level */
#navigation ul li a {
  padding:17px 0 0 0 ;
  display: block;
  color: #000;
  font-weight: normal;
  font-size:24px;
  text-transform:capitalize;


}






@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  #navigation ul li a {
    padding:13px 0 0 0 ;
    display: block;
    color: #000;
    font-weight: bold;
    font-size:14px;
    text-transform:uppercase;


  }


}


#navigation ul li {
  background: transparent;
  height:51px;


}


#navigation ul li span {
  background:transparent;
  height:51px;
  padding:0px 13px ;
  margin:0 ;


}


#navigation ul li a {
  color:#000 ;
  background: transparent;
  height:51px;


}


#navigation ul li.active {
  height:51px !important;
  background: url(../images/menu_02.jpg) no-repeat 100% 0;


}


#navigation ul li.active span {
  height:51px !important;
  background: url(../images/menu_02.jpg) no-repeat 100% 0;


}


#navigation ul li.active a {
  color:#ffffff !important;
  height:51px !important;
  background: url(../images/menu_02.jpg) no-repeat 0 0;


}


#navigation ul li:hover{
  height:51px !important;
  background: url(../images/menu_02.jpg) no-repeat 100% 0 ;


}


#navigation ul li:hover span {
  height:51px !important;
  background: transparent ;


}


#navigation ul li:hover a {
  color:#ffffff !important;
  height:51px !important;
  background: url(../images/menu_01.jpg) no-repeat 0 0 ;


}


#navigation ul li a:hover,
#navigation ul li a:active,
#navigation ul li a:focus,
#navigation ul li a.sfhover {
  color: #fff;


}


#navigation ul li:hover a,
#navigation ul li.sfhover a,
#navigation ul li.havechildsfhover a,
#navigation ul li.havechild-activesfhover a {
  color: #fff;


}


#navigation ul li a.active,
#navigation ul li a.active:hover,
#navigation ul li a.active:active,
#navigation ul li a.active:focus {
  color: #fff;


}


/* 2nd level and above */
#navigation ul li ul {
  background: #000;
  margin-top: 5px;
  padding-bottom: 3px;
  padding-top: 13px;
  text-align:left !important;


}


#navigation ul li ul ul {


}


#navigation ul li ul li {
  background: none;


}


#navigation ul li ul a {
  margin: 0;
  padding:10px 0 0 0;
  background:none !important;
  color: #fff;
  font-size:12px;


}


#navigation ul li.havesubchild,
#navigation ul li.havesubchild-active{


}


#navigation ul li ul a:hover,
#navigation ul li ul a:active,
#navigation ul li ul a:focus,
#navigation ul ul li:hover,
#navigation ul ul li.sfhover,
#navigation ul ul li.havesubchildsfhover,
#navigation ul ul li.havesubchild-activesfhover,
#navigation ul ul ul li:hover,
#navigation ul ul ul li.sfhover,
#navigation ul ul ul li.havesubchildsfhover,
#navigation ul ul ul li.havesubchild-activesfhover {
  background:#c35f25 ;
  color: #fff;


}


#navigation ul ul li a.active,
#navigation ul ul li a.active:hover,
#navigation ul ul li a.active:active,
#navigation ul ul li a.active:focus {
  background: none !important;
  color: #fff;
  font-weight: bold;


}


#navigation ul li li.active {
  height:40px !important;
  background: #c35f25 ;


}


#navigation ul li li.active span {
  height:40px !important;
  background: transparent ;


}


#navigation ul li li.active a {
  color: white !important;
  height:40px !important;
  background: #c35f25 ;


}




#navigation ul li ul li ul {
  margin-left:195px;
  background: #5a5138;
  margin-top: -30px;
  padding-bottom: 3px;
  padding-top: 13px;
  text-align:left !important;
  padding-bottom: 8px;


}


P.S. Il menù come si può notare presenta soltanto il primo livello, ovvero non ha sottomenù.
: Re:CAMENIAN - Visualizzazione errata menù in IE
: conti1 31 Mar 2012, 01:37:39
ciao
io avrei postato nella sezione 1.5 magari  avresti anche trovato spillato  un post del xche delle tue domande.
: Re:CAMENIAN - Visualizzazione errata menù in IE
: DCweb 31 Mar 2012, 01:56:33
Ok grazie  :)
: Re:CAMENIAN - Visualizzazione errata menù in IE
: tomtomeight 31 Mar 2012, 08:29:04
Post spostato segue su: http://forum.joomla.it/index.php/topic,160188.msg717514.html#msg717514