• User Newbie

    CSS e compatibilita Firefox

    Ciao a tutti,
    ho un foglio di stile che va bene con IE7 ma dreamweaver nella verifica pagina mi dice che la riga
    vertical-align : top;
    non è un valore supportato.
    Qualcuno sa dirmi come indicare l'allineamento top?

    Inoltre sempre dreamweaver mi segnale un "Bug espansione riquadro" sulla riga
    <table class="mt_table" border="0" cellpadding="0" cellspacing="0" align="center">

    la classe di stile é la seguente:
    .mt_table{
    width : 768px;
    border-width : 1px 1px 1px 1px;
    border-style : solid solid solid solid;
    border-top-color : #395475;
    border-left-color :;
    border-right-color :;
    border-bottom-color :;
    }

    Please, help me! :eheh:

    Grazie


  • User Attivo

    Ciao guidino,

    visto che si tratta di un problema con i CSS, ti sposto nella sezione apposita.

    :ciauz:


  • User

    la classe io la farei più elegantemente e più funzionalmente così:

    .mt_table{
    width : 768px;
    border: 1px solid #395475;
    }
    poi non puoi dire che il bordo è 0 nella pagina html e 1px nel foglio di stile, forse è quello il bug.

    vertical-align a memoria (io non uso le tabelle) non è un attributo di table ma di TH e TD


  • User Newbie

    grazie


  • Super User

    Ciao guidino 🙂

    Vertical-align è un attributo che imposta l'allineamento o tra elementi inline o tra i contenuti di chi non lo è di natura.
    Prendendo gli esempi l'html in questione:

    [html]<p><img src="#" alt="" /> Questo è il testo adiacente alla nostra immagine</p>[/html]Se imposto il seguente css:
    [html]
    img{ vertical-align:top;}
    [/html]Allora il testo si disporrà accanto alla nostra immagine, ma con posizionamento "top" esso si terrà alto rispetto all'altezza di quest'ultima.

    [html]
    <img src="#" alt="" /><p>Altra prova di testo, questa volta l'immagine è al di fuori del paragrafo.</p>
    [/html]Questo caso sembra simile ma si differenzia dal fatto che la nostra immagine è posizionata all'esterno del nostro paragrafo. Il nostro testo di base andrà a capo dopo l'immagine essendo un elemento di blocco.

    Stabiliamo quindi queste proprietà esplicative nei css:

    [html]
    p{display:inline;}
    img{vertical-align:middle;}
    [/html]
    Il nostro paragrafo diventa quindi un elemento inline e si orienterà sulla linea verticale mediana della nostra immagine.

    Altri valori come forse saprai sono "bottom, middle, sub" e via dicendo
    Puoi comunque fare delle prove per capirlo meglio.

    Questo tag è applicabile anche ad altri elementi se vuoi una lista te la stilo.

    Per quanto riguarda il tuo problema bisognerebbe vedere il caso specifico.
    Vertical-align è supportato e non da problemi nella validazione dei css.
    Magari hai dimenticato un punto e virgola o hai attributo questo valore ad un elemento che non può prenderlo in considerazione. 😄


    Per l'errore di Dreamweaver chiamato anche "Expanding box problem" è un errore che generalmente dreamweaver tiene nella lista xml delle "eccezioni" e cioè dei problemi ignorati. Quindi magari considerarlo o meno è irrilevante a mio parere.

    Comunque esso si rifà ai bug presenti in IE7 e da come ricordo si insedia per via delle dimensioni fisse che dai nel tuo caso alla tabella in questione. Dovrebbe essere stato anche risolto se non mi sbaglio ed è per questo che DM te lo insedia nelle exception.

    I miei tempi sono scarsi però puoi vedere nel dettaglio la descrizione in questa pagina:positioniseverything.net/explorer/expandingboxbug.html

    Ciao!