• User Newbie

    Problema con elenco con collegamento in firefox

    Ho creato un elenco con i CSS dove le righe sono collegamenti e al passaggio del mouse cambiano leggermente aspetto. Funziona alla perfezione, ma in Firefox a volte l'impaginazione si scombussola. La cosa strana è che non accade sempre e facendo diverse ricariche del browser con F5 l'impaginazione ad un certo punto ritorna corretta.
    Posto il codice della pagina e del CSS:

    Pagina:

    <div class="video">
    <a href="video.asp?id=<%=video("id_video")%>">

    <div style="float:left; margin-top:10px; margin-left:10px;">
    <img src="img/Video_grande.png" width="50" height="50" border="0" align="absmiddle"/>
    </div>
    <div style="float:left; margin-top:20px; margin-left:20px;">
    <h3><%=video("nome")%></h3>
    Creato il <%=video("data")%> da <%=video("autore")%>
    </div>

    </a>
    </div>

    CSS:

    .video a
    {
    height:74px;
    width:940px;
    background:#595959;
    display:block;
    position:relative;
    text-decoration:none;
    color:#FFF;
    border: #595959 1px solid;
    }

    .video a:hover
    {
    color:#FFF;
    background:#646464 url(img/play.png) no-repeat center right;
    border-left: #898989 1px solid;
    border-right:#292929 1px solid;
    border-top: 1px solid;
    border-bottom:#292929 1px solid;
    }

    Quale può essere il problema ? Sto diventando matto per risolverlo. Grazie 1000 !!!


  • User Attivo

    Ho copiato il codice ma non vedo nessun problema. Magari se hai la pagina online posso vedere dove sta l'errore.

    Ti consiglio comunque di non usare gli stili inline (intendo dire gli stili CSS direttamente nell'html) perchè rendi il codice più difficile da leggere e da gestire.


  • User Newbie

    scais3038.it/TEST/elenco_video.asp

    Qui trovi la pagina online. Se scorri tra le varie pagine con i pulsanti che trovi sotto ad un certo punto vedrai che in firefox si spagina completamente.


  • User Attivo

    I video che si sfasano hanno un html diverso dagli altri.

    Sembra inoltre che vengano generati in ordine random e per questo facendo f5 a volte c'e l'errore ed a volte non c'e.

    A parte questo, secondo me dovresti risolvere tutti gli errori del w3org ed eliminare i CSS inline.


  • User Newbie

    Ciao, grazie per la risposta. Ti volevo chiedere qualche chiarimento: quali sono i TAG html che hai visto diversi ?

    Inoltre cosa intendi per CSS Inline ? Io tutto il CSS ce l'ho in una pagina dedicata e la richiamo dalla pagina html in questo modo:

    <link href="stile.css" rel="stylesheet" type="text/css" />

    Non è corretto ?

    Ciao e grazie ancora...


  • User Attivo

    Ciao, grazie per la risposta. Ti volevo chiedere qualche chiarimento: quali sono i TAG html che hai visto diversi ?Ho controllato il codice con firebug ed ho visto che il box sfasato ha un html diverso dagli altri. il motivo mi e' ignoto ma forse correggendo gli errori del w3org sparisce anche il problema. Comunque nel box sfasato vedo questo HTML:

    <div class="video">
    <a href="video.asp?id=22"></a>
    <div style="float: left; margin-top: 10px; margin-left: 10px;">
    <a href="video.asp?id=22"><img height="50" border="0" align="absmiddle" width="50" src="img/Video_grande.png">
    </a>
    </div>
    <div style="float: left; margin-top: 20px; margin-left: 20px;">
    <h3><a _moz-rs-heading="" href="video.asp?id=22">Video</a></h3>
    <a href="video.asp?id=22">Creato il 15/07/2010 11.35.00 da Autore
    </a>
    </div>
    ```> Inoltre cosa intendi per CSS Inline ? Io tutto il CSS ce l'ho in una  pagina dedicata e la richiamo dalla pagina html in questo modo: 
    
    <link href="stile.css" rel="stylesheet" type="text/css" />
    
    Non è corretto ?Si il tuo sistema è corretto ma nel codice allora perchè ci sono gli stili inline? Esempio:
    

    <div style="float: left; margin-top: 20px; margin-left: 20px;"></div>


  • User Newbie

    Hai ragine ce n'era ancora qualcuno inline che ho sistemato. Ho corretto anche tutti gli errori W3org, ma il problema rimane.

    Non capisco perchè ma nel record che sfalsa si inserisce da solo la chiusura del tag a ovvero </a> e questo falsa il codice.

    Cosa può essere, è davvero molto strano.

    Ciao e grazie..


  • User Attivo

    Non so dove sta esattamente il problema, a me sembra che sia un bug di Firefox.

    Comunque vedo ancora errori, il tag <a> è un elemento inline e non può contenere block element tipo <div> o <h1>, magari non c'entra niente ma tanto vale provare a sistemare tutti i problemi w3org...


  • User Newbie

    Come faccio a disporre gli elementi all'interno del blocco <a>. Cosa mi consigli di utilizzare al posto di <DIV> e <H1>? Pensi che utilizzando <SPAN> potrei risolvere?


  • User Attivo

    Ho fatto una prova in locale, la freccia sulla destra non appare ma si puo' aggiungere facilmente:

    CSS:

    .video2 {
    background: #595959;
    margin: 1px 0;
    float: left;
    width: 100%;
    }
    .video2 img {
    float: left;
    border: 0;
    padding: 0 0 0 10px;
    }
    .video2 a{
    display: block;
    height: 40px;
    padding: 10px 0 20px;
    text-decoration: none;
    }
    .video2 a:hover{
    background: #646464;
    }
    .title{
    display: block;
    font-size: 16px;
    padding: 5px 0 0 80px;
    }
    .description{
    display: block;
    margin-top: -10px;
    padding: 0 0 0 80px;
    color: white;
    }HTML:

    <div class="video2">
    <a href="#">
    <img src="elenco_video.asp_files/Video_grande.png" alt="#" />
    <span class="title">Video</span><br />
    <span class="description">Creato il 17/07/2010 11.35.00 da Autore</span>
    </a>
    </div>
    Comunque hai errori di w3org pure nel doctype, potrebbe essere per questo motivo che ti renderizza la pagina in modo strano.


  • User Newbie

    Ottimo!
    Togliendo i <div> interni al tag <a> ed utilizzando il tag <span> ho risolto il problema.
    Le pagine sono correttamente impaginate.

    Grazie 1000 !!!


  • User Attivo

    Bene :). Ti consiglio anche di installarti l'add-on "Html Validator" per Firefox, cosi' potrai evitare questi problemi sul nascere.