Problema con menu a tendina e contenuto generato

**cip999** · 20-08-2014, 15:21

Salve a tutti!

Anzitutto mi scuso se il primo topic non rispettava il regolamento, spero che questo vada bene.
Scrivo in questa sezione perché, come da titolo, ho riscontrato un'incongruenza nella realizzazione del menu a tendina di un sito fittizio come allenamento per mettere a punto le conoscenze apprese nello studio dei fogli di stile.

Il problema riguarda sostanzialmente la compatibilità cross-browser. Nell'header del sito ho inserito il classico menu di navigazione a tendina con annidamento multiplo, dove cioè ci sono due livelli di sottomenu. Il tutto è realizzato con la solita tecnica basata sulle liste annidate e i list-item settati su float: left. Ho fatto in modo, grazie al contenuto generato, che i list-item che introducono un sottomenu presentino una freccettina sul lato destro, diretta verso il basso nel caso si tratti del primo livello o a destra se invece introducono la seconda tendina, quella "laterale". La freccetta altro non è che una .png di 18px x 18px, con la proprietà position: absolute. Ora, tralasciando i disastrosi effetti ottenuti su IE8 (a cui penserò in seguito), il problema è che l'allineamento verticale "base" della freccia cambia a seconda che si visualizzi la pagina con Chrome o Firefox. Per la precisione, Chrome assume come origine del sistema di riferimento il punto in alto a sinistra, come al solito; Firefox, al contrario, centra verticalmente l'immagine. Quindi chiaramente si ottengono effetti diversi a seconda del browser. Concludo con uno snippet del codice usato per il contenuto generato e con due screenshot del risultato sui diversi browser.

codice:

#menu > .flyout-item > a::after {
                                 content: url(images/bottom_arrow.png);
                                 position: absolute;
                                 top: 50%; right: 5px;
                                 margin-top: -9px;
                                }

chrome_screen.jpg firefox_screen.jpg

Mi scuso per la prolissità del post, spero almeno di essermi spiegato e che qualcuno abbia una soluzione...

**KillerWorm** · 20-08-2014, 16:26

Ciao, ho fatto qualche prova ma non vedo il problema che descrivi. Chiaramente non so come hai impostato il tutto.
Con ciò che ho provato io, l'immagine viene centrata regolarmente in verticale e allo stesso modo sui vari browser (FF, IE, CH).
Questo è quanto ho provato:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #menu{
        font-family: Arial, sans-serif;
        font-size: 12px;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      #menu > .flyout-item {
        position: relative;
        width: 100px;
        padding: 20px 0;
        float: left;
        border: 1px solid;
        text-align: center;
      }
      #menu > .flyout-item > a:after {
        content: url(http://forum.html.it/forum/images/smilies/smile.gif);
        position: absolute;
        top: 50%;
        right: 5px;
        margin-top: -9px;
      }
    </style>
  </head>
  <body>
    <ul id="menu">
      <li class="flyout-item"><a href="">VOCE1</a></li>
      <li class="flyout-item"><a href="">VOCE2</a></li>
      <li class="flyout-item"><a href="">VOCE3</a></li>
    </ul>
  </body>
</html>

Deduco quindi che nel tuo caso ci siano diversi elementi che influiscano sul problema che descrivi. Posso immaginare anche che ci siano degli errori di validazione che fanno reagire i vari browser in modo differente.

Dovresti postare un link alla tua pagina pubblica, se possibile, oppure il resto del codice per poter capire meglio.

PS: IE8 non riconosce i pseudo-elementi indicati con i doppi due punti (::), che è una sintassi introdotta con CSS3 per differenziare le pseudo-classi dai pseudo-elementi. Dovresti usare la sintassi :after (che è riconosciuta, dai vecchi browser, come pseudo-classe) anziché ::after.

**cip999** · 20-08-2014, 19:08

La pagina non è online, quindi faccio il copia-incolla della parte del codice (CSS e HTML) relativa al menu (non credo che gli altri elementi siano rilevanti).

codice:

* {
   margin: 0; padding: 0;
   border: none; outline: none;
   color: #000;
   text-decoration: none;
   background-color: transparent;
  }
body {
      font: 10px/1.5 Arial, Verdana, sans-serif;
     }
#menu {
       width: 800px; min-height: 40px;
       margin: 5px auto;
       -moz-box-shadow: 0 0 5px 0 #525C70;
       -webkit-box-shadow: 0 0 5px 0 #525C70;
       box-shadow: 0 0 5px 0 #525C70;
      }
#menu li {
          float: left;
          position: relative;
          list-style-type: none;
         }
#menu a {
         display: block;
         position: relative;
         width: 160px;
         font: bold 2em/40px Arial, Verdana, sans-serif;
         text-align: center;
         text-decoration: none;
         color: #2B4F74;
         background-color: #F2F2F2;
        }
#menu > li:not(:first-child):after {
                                    content: "";
                                    position: absolute;
                                    top: 25%; left: 0;
                                    width: 1px; height: 50%;
                                    background-color: #2B4F74;
                                   }
#menu a:not(#active):hover {
                            background-color: #CBD1D7;
                           }
#menu .flyout {
               position: absolute;
               top: 100%; left: -99999px;
               -moz-box-shadow: 0 5px 5px 0 #525C70;
               -webkit-box-shadow: 0 5px 5px 0 #525C70;
               box-shadow: 0 5px 5px 0 #525C70;
              }
#menu .flyout li:after {
                        content: "";
                        position: absolute;
                        top: 0; left: 25%;
                        width: 50%; height: 1px;
                        background-color: #2B4F74;
                       }
#menu a:hover + .flyout,
#menu .flyout:hover {
                     left: 0;
                    }
#menu .flyout-alt {
                   position: absolute;
                   left: -99999px; top: 5px;
                   -moz-box-shadow: 5px 0 5px 0 #525C70;
                   -webkit-box-shadow: 5px 0 5px 0 #525C70;
                   box-shadow: 5px 0 5px 0 #525C70;
                  }
#menu .flyout-alt li:first-child:after {
                                        display: none;
                                       }
#menu a:hover + .flyout-alt,
#menu .flyout-alt:hover {
                         left: 100%;
                        }
#menu > .flyout-item > a:after {
                                content: url(images/bottom_arrow.png);
                                position: absolute;
                                top: 50%; right: 5px;
                                margin-top: -9px;
                               }
#menu .flyout > .flyout-item > a:after {
                                        content: url(images/right_arrow.png);
                                        position: absolute;
                                        top: 50%; right: 5px;
                                        margin-top: -9px;
                                       }
#menu #active {
               color: #CBD1D7;
               background-color: #2B4F74;
              }

codice HTML:

<ul id="menu">
  <li><a href="#" title="Item 1">Item 1</a>
  <li class="flyout-item"><a href="#" title="Item 2">Item 2</a>
    <ul class="flyout">
      <li><a href="#" title="Item 2.1">Item 2.1</a>
      <li><a href="#" title="Item 2.2">Item 2.2</a>
    </ul>
  <li class="flyout-item" title="Item 3"><a href="#">Item 3</a>
    <ul class="flyout">
      <li class="flyout-item"><a href="#" title="Item 3.1">Item 3.1</a>
        <ul class="flyout-alt">
          <li><a href="#" title="Item 3.1.1">Item 3.1.1</a>
          <li><a href="#" title="Item 3.1.2">Item 3.1.2</a>
          <li><a href="#" title="Item 3.1.3">Item 3.1.3</a>
          <li><a href="#" title="Item 3.1.4">Item 3.1.4</a>
        </ul>
      <li><a href="#" title="Item 3.2">Item 3.2</a>
      <li><a href="#" title="Item 3.3">Item 3.3</a>
    </ul>
  <li class="flyout-item"><a id="active" href="#" title="Item 4">Item 4</a>
    <ul class="flyout">
      <li class="flyout-item"><a href="#" title="Item 4.1">Item 4.1</a>
        <ul class="flyout-alt">
          <li><a href="#" title="Item 4.1.1">Item 4.1.1</a>
          <li><a href="#" title="Item 4.1.2">Item 4.1.2</a>
        </ul>
    </ul>
  <li><a href="#" title="Item 5">Item 5</a>
</ul>

Ps: Ti ringrazio per il consiglio sulla sintassi.

**KillerWorm** · 21-08-2014, 00:42

Ho provato il tuo codice ma con tutti e tre i browser, su cui l'ho testato, vedo le immagini allineate in basso (come le vedi tu su FF).
Per la precisione sto usando Chrome versione 36 su Vista.

Posso pensare a due possibili cause:

stai usando una qualche versione di Chrome che si comporta diversamente da quella che ho io e dagli altri browser su chi sto testando.
il resto del codice (che non hai postato) presenta qualche errore di validazione per cui su Chrome si sfascia qualcosa che fa risultare l'immagine "erroneamente" centrata (anche se l'intenzione era questa).

Chiaramente sono solo ipotesi.

Ad ogni modo potresti usare una soluzione diversa e più semplice, con l'uso delle immagini/frecce come background, al posto di inserirle con :after.
Potrebbe essere una cosa del genere:

codice:

#menu>.flyout-item>a{
  background: url(images/bottom_arrow.png) no-repeat 140px center;
}
#menu .flyout>.flyout-item>a{
  background: url(images/right_arrow.png) no-repeat 140px center;
}

Tieni presente che potrebbe avere qualche conflitto con i background-color, per cui dovrai inserire questa parte prima di #menu a e/o assegnare qualche eventuale !important se serve, oppure usare la sintassi estesa specificando background-image, background-repeat, background-position.

**cip999** · 21-08-2014, 11:50

Grazie, ho risolto mettendo le immagini come sfondo e specificando separatamente background-image, background-repeat e background-position. Ora funziona sia su FF che su Chrome, nonostante su IE8 non si veda nulla... E, a proposito, vorrei chiederti un paio di cose a proposito di IE (se non ti dispiace

), ma lo faccio in privato per non andare OT.

Grazie ancora!

**KillerWorm** · 21-08-2014, 15:10

Grazie, ho risolto mettendo le immagini come sfondo e specificando separatamente background-image, background-repeat e background-position. Ora funziona sia su FF che su Chrome

Bene.

E, a proposito, vorrei chiederti un paio di cose a proposito di IE (se non ti dispiace

), ma lo faccio in privato per non andare OT.

Mi spiace, senza offesa ma non rispondo a messaggi tecnici in privato (a meno che non si tratti di richieste di tipo lavorativo). Ti consiglio di aprire una nuova discussione sul forum riportando il codice in questione o eventualmente il link a questa discussione.

**cip999** · 21-08-2014, 19:43

Originariamente inviata da KillerWorm

Mi spiace, senza offesa ma non rispondo a messaggi tecnici in privato (a meno che non si tratti di richieste di tipo lavorativo). Ti consiglio di aprire una nuova discussione sul forum riportando il codice in questione o eventualmente il link a questa discussione.

Ok, grazie lo stesso.

Discussione: Problema con menu a tendina e contenuto generato

Strumenti discussione

Ricerca discussione

Visualizza

Problema con menu a tendina e contenuto generato

Permessi di invio