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.
chrome_screen.jpg firefox_screen.jpgcodice:#menu > .flyout-item > a::after { content: url(images/bottom_arrow.png); position: absolute; top: 50%; right: 5px; margin-top: -9px; }
Mi scuso per la prolissità del post, spero almeno di essermi spiegato e che qualcuno abbia una soluzione...![]()