• C
    User Attivo •

    Altezza dei div per testo e immagini: problemi con firefox

    Buongiorno a tutti,
    devo realizzare un sito accessibile che tra le varie caratteristiche ha quella di consentire la modifica della dimensione del carattere.

    Il problema sorge quando devo realizzare un div con bordo di 1px (quindi dalle dimensioni visibili) con dentro del testo e un'immagine allineata a sx e modifico la dimensione del carattere.

    Es.: http: // www [dot] webcapacity [dot] it/temp.htm

    Visualizzando con firefox l'esempio sopra, se non specifico l'altezza del div ho i casi 1 (testo normale) e 2 (testo grande): il caso 1 non va bene. Se specifico l'altezza in px ho i casi 3 (testo normale) e 4 (testo grande): il caso 4 non va bene. Se specifico l'altezza al 100% ho con i casi 5 (testo normale) e 6 (testo grande): il caso 5 non va bene.

    Ho anche provato a nidificare fino a 2 div, o a mettere in float l'immagine con un div a parte, ma nulla... :bho:

    Sotto riporto il codice html della pagina nell'esempio, che contiene nell'head anche gli stili utilizzati.

    Grazie in anticipo!
    :ciauz:

    [html]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
    <HTML lang="it">
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>prova</title>
    <style>
    div.h1 {
    margin: 0px;
    padding: 0px;
    border: 1px solid #003366;
    background: transparent;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.6em;
    }
    div.h2 {
    margin: 0px;
    padding: 0px;
    border: 1px solid;
    background: transparent;
    font-size: 3em;
    font-weight: bold;
    line-height: 1.6em;
    }
    div.h3 {
    height: 105px;
    margin: 0px;
    padding: 0px;
    border: 1px solid;
    background: transparent;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.6em;
    }
    div.h4 {
    height: 105px;
    margin: 0px;
    padding: 0px;
    border: 1px solid;
    background: transparent;
    font-size: 3em;
    font-weight: bold;
    line-height: 1.6em;
    }
    div.h5 {
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 1px solid;
    background: transparent;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.6em;
    }
    div.h6 {
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 1px solid;
    background: transparent;
    font-size: 3em;
    font-weight: bold;
    line-height: 1.6em;
    }
    </style>

    </HEAD>
    <body>
    Caso 1
    <div class="h1">
    <img src="http://www.xxxx/immagini/altro/onu.gif" width="140" height="104" border="0" align="left" alt="Organizzazione delle Nazioni Unite">
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    </div>
    <br><br><br><br><br><br><br><br><br>
    Caso 2
    <div class="h2">
    <img src="http://www.xxxx/immagini/altro/onu.gif" width="140" height="104" border="0" align="left" alt="Organizzazione delle Nazioni Unite">
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    </div>
    <br><br><br><br><br><br><br><br><br>
    Caso 3
    <div class="h3">
    <img src="http://www.xxxx/immagini/altro/onu.gif" width="140" height="104" border="0" align="left" alt="Organizzazione delle Nazioni Unite">
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    </div>
    <br><br><br><br><br><br><br><br><br>
    Caso 4
    <div class="h4">
    <img src="http://www.xxxx/immagini/altro/onu.gif" width="140" height="104" border="0" align="left" alt="Organizzazione delle Nazioni Unite">
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    </div>
    <br><br><br><br><br><br><br><br><br>
    Caso 5
    <div class="h5">
    <img src="http://www.xxxx/immagini/altro/onu.gif" width="140" height="104" border="0" align="left" alt="Organizzazione delle Nazioni Unite">
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    </div>
    <br><br><br><br><br><br><br><br><br>
    Caso 6
    <div class="h6">
    <img src="http://www.xxxxx/immagini/altro/onu.gif" width="140" height="104" border="0" align="left" alt="Organizzazione delle Nazioni Unite">
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    Convenzione Internazionale dei Diritti delle Persone con Disabilità
    </div>
    <br><br><br><br><br><br><br><br><br>
    </body>
    </html>
    [/html]

    0
  • P
    Super User •

    Ciao Ceccus,
    spero di aver capito...

    Utilizza una proprietà clear in questo modo:
    **
    Css**
    .clear {
    clear: both;
    }

    **xhtml
    **
    <br class="clear" /> all'interno del div che contiene testo e immagine.

    Esempio caso 5:

    
<div class="h5">
<img src="http://www.xxxx/immagini/altro/onu.gif" width="140" height="104" border="0" align="left" alt="Organizzazione delle Nazioni Unite">
Convenzione Internazionale dei Diritti delle Persone con Disabilità
Convenzione Internazionale dei Diritti delle Persone con Disabilità
Convenzione Internazionale dei Diritti delle Persone con Disabilità
<br class="clear" /></div>
```;)
    0
  • C
    User Attivo •

    Grande Pika!
    Funziona benissimo! Caffé virtuale pagato!:yuppi:
    Grazie veramente!
    :ciauz:

    0
  • P
    Super User •

    Buono caffè virtuale!! 😄
    Di nulla di nulla 😄

    0
  • P
    Super User •

    Mi ero dimenticata una cosa...

    Internet explorer pare non sopportare la presenza del br che utilizza la classe clear...quindi meglio se metti <div class="clear"></div> al posto di <br class="clear"></div>. 😉

    0
  • C
    User Attivo •

    Grazie pika,
    ma funziona benissomo anche su IE, per il quale le cose funzionavano bene anche prima, era firefox il problema. Inoltre credo che il div vuoto non sia il massimo dell'accessibilità per i non vedenti, comunque terrò presente il suggerimento.
    Di nuovo grazie!
    :ciauz:

    0
  • P
    Super User •

    A me invece da problemi su IE, ma se proprio non si vuole infilare un div vuoto si può usare anche hr che funziona sia su IE che FF. 😉

    ** Edit**: nel caso si voglia usare hr bisogna scrivere il codice che segue nel css se non si vuole mostrare la riga che il tag hr crea:

    hr {

    visibility: hidden;

    }

    e

    hr.clear{

    clear: both;

    }

    Xhtml:
    <hr class="clear" />
    Non so se sia giusto usare hr per questo scopo, ma ho fatto delle prove e il clear applicato a Br non mi funziona con iE 7. 😞

    0
Effettua l'accesso per rispondere