Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Due problemi con i CSS

  1. #1
    Utente di HTML.it L'avatar di cip999
    Registrato dal
    Aug 2014
    Messaggi
    12

    Due problemi con i CSS

    Salve a tutti!

    Scrivo in questa sezione perché, come da titolo, ho riscontrato (almeno) due incongruenze nella realizzazione di un sito fittizio come allenamento per mettere a punto le conoscenze apprese nello studio dei fogli di stile.
    Detto questo, andiamo al punto. Ecco i due problemi cui accennavo:
    1. Il primo 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, allinea 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.jpgfirefox_screen.jpg
    2. Il secondo problema che ho riscontrato riguarda sempre il contenuto generato, solo che questa volta non riguarda la posizione ma la quantità. Infatti, un semplice testo (" Leggi tutto") generato dopo un paragrafo viene stampato anche subito prima dello stesso, come se nella regola insieme all':after fosse stato usato anche il :before.


    Mi scuso per la prolissità del post, spero almeno di essermi spiegato e che qualcuno abbia una soluzione...
    Ultima modifica di cip999; 19-08-2014 a 22:24
    Due cose sono infinite: l'universo e la stupidità umana. Ma non sono sicuro della prima...
    Albert Einstein

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Il titolo e` troppo generico (non individua il problema), e a norma di regolamento devo chiudere.
    Puoi riaprire con titolo corretto (pero` visto che i due problemi sono diversi e disgiunti, forse ti conviene fare due discussioni diverse)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.