CLEAR BOTH: in FF c'è spaziatura invece in IE no

[daniele_dll]

Hola a todos,

lo so che san Firefox ha (quasi) sempre ragione, ma ho un piccolo problemuccio: se metto un bel

.Clear
{
    display: inline;
    clear: both;
    height: 0;
    font-size: 0;
}

per usare il clear metto un br (ma ho provato anche con un div ed un p, che non si sa mai )

Il display inline ho provato a toglierlo e a metterlo come block ma niente da fare

Per intenderci

questo è Firefox

invece

questo è IE

Dal codice che ho scritto, tecnicamente, quello spaziatura in FF non ci dovrebbe affatto stare perché ho messo apposta height e font-size a zero

Se tolgo il br con la classe Clear anche quel poco di spaziature che c'è su IE sparisce mentre su FF impazzisce (per un ottimo motivo) mezzo layout

Non vi posto tutto il CSS perché non penso serva (poi se serve dite pure che lo incollo ma sono 14kb di roba più un altro paio di kb in un altro file) vi posto invece un pezzetto dell'html, ma solo per farvi vedere come, concettualmente, dovrebbe venir fuori la cosa

                            <div class="SearchBox">

                                <form class="GenericForm" method="post" action="./Search">

                                    <div class="GenericFormBlock" id="ContactFormSearchNameField">
                                        <input class="GenericFormElement" type="text" name="contact_name" id="contact_name" maxlength="100" /><br class="Clear" />
                                        <label for="contact_name" class="GenericFormRowLabel">Nome e Cognome</label>
                                    </div>
                                    <div class="GenericFormBlock" id="ContactFormSearchFiscalCodeField">
                                        <input class="GenericFormElement" type="text" name="contact_fiscalcode" id="contact_fiscalcode" maxlength="16" /><br class="Clear" />
                                        <label for="contact_fiscalcode" class="GenericFormRowLabel">Codice Fiscale</label>
                                    </div>
                                    <div class="GenericFormBlock" id="ContactFormSearchTagsField">
                                        <input class="GenericFormElement" type="text" name="contact_tags" id="contact_tags" /><br class="Clear" />
                                        <label for="contact_tags" class="GenericFormRowLabel">Tags</label>
                                    </div>
                                    <div class="GenericFormBlock" id="ContactFormSearchCityField">
                                        <input class="GenericFormElement" type="text" name="contact_city" id="contact_city" maxlength="100" /><br class="Clear" />
                                        <label for="contact_city" class="GenericFormRowLabel">Citt&agrave;</label>
                                    </div>

                                    <div class="GenericFormBlockSubmit">
                                        <input class="GenericFormSubmit" type="submit" name="submit" value="Cerca" /><br class="Clear" />
                                    </div>

                                    <br class="Clear" />

                                </form>

                            </div>

Per finire vi posto anche uno shot intero di FF cosi vi fate un idea pratica di quello che dovrebbe venir fuori (una volta che le spaziature verticali si sono allineate in entrambi i browser)

http://www.phpsoft.it/mystuff/shots/...ontactbook.png

[Mich_]

Ma perche` non usi una marcatura semanticamente corretta?
I blocchi all'interno dei <form> andrebbero realizzati tramite <fieldset>. Altrimenti chi non vede la pagina ha piu` difficolta` a raggruppare le varie parti.

E poi mi pare che quello spazio sia tra due blocchi <div class="GenericFormBlock"...>, non generato dal
(ma non ho potuto verificare, dato che mancano elementi)
E quale DTD usi? Quando si fanno cose a quel livello, andrebbe usato XHTML Strict, altrimenti non puoi prevedere cosa accadra` neibrowser futuri.

E comunque c'e` una contraddizione: un blocco contenente un clear, non ha senso che sia inline.
E i clear non andrebbe inserito in un blocco a parte: al limite puoi usare il trucco suggerito da fcaldera di generare il blocco con l'attributo :after.

[daniele_dll]

Originariamente inviato da Mich_
Ma perche` non usi una marcatura semanticamente corretta?
I blocchi all'interno dei <form> andrebbero realizzati tramite <fieldset>. Altrimenti chi non vede la pagina ha piu` difficolta` a raggruppare le varie parti.

Attualmente non è una priorità rendere il codice funzionante senza CSS e/o JS, soprattutto perché il lavoro lo dovevo già consegnare tempo addietro ed è un gestionale

E poi mi pare che quello spazio sia tra due blocchi <div class="GenericFormBlock"...>, non generato dal
(ma non ho potuto verificare, dato che mancano elementi)
E quale DTD usi? Quando si fanno cose a quel livello, andrebbe usato XHTML Strict, altrimenti non puoi prevedere cosa accadra` neibrowser futuri.

Sto già usando lo strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>

E comunque c'e` una contraddizione: un blocco contenente un clear, non ha senso che sia inline.
E i clear non andrebbe inserito in un blocco a parte: al limite puoi usare il trucco suggerito da fcaldera di generare il blocco con l'attributo :after.

Sisi, infatti quella del display inline era solo una prova ... l'ho lasciato cosi prima di postare

Sono andato a controllare e ora su IE si vede correttamente, nel senso che mi ero scordato ad azzerare un margine (il search box ha un form all'interno che è già stilizzato per i fatti suoi ... ora ho sistemato tutti i margini che mi rimanevano da azzerare), invece su FF ancora nada

I due file che mi compongono il CSS per quella pagina li ho messi online, sono troppo grandi da postare:
http://www.phpsoft.it/mystuff/shots/temp/Main.css
http://www.phpsoft.it/mystuff/shots/...tbook-Main.css

All'indirizzo:
http://www.phpsoft.it/mystuff/shots/...agina-html.zip

c'è la pagina html, con tutta la varia roba, salvata tramite firefox (manca solo qualche immagine qua e la, ma nulla di importante)

nota: ci sarà sicuramente tanta roba non fatta proprio benissimo non fateci caso

[Mich_]

Originariamente inviato da daniele_dll
Attualmente non è una priorità rendere il codice funzionante senza CSS e/o JS, soprattutto perché il lavoro lo dovevo già consegnare tempo addietro ed è un gestionale

Si` ma cosi` facendo ti complichi la vita coni CSS. Se la marcatura e` fatat bene, dimezzi il lavoro per far funzionare il CSS.

Sto già usando lo strict

Controlla di non avere il prologo XML o commenti prima del DOCTYPE: IE6 riconosce il DOCTYPE solo se e` all'inizio del file.

I due file che mi compongono il CSS per quella pagina li ho messi online, sono troppo grandi da postare: ...

Ma non potevi mettere in linea la pagina, invece dello zip? E` troppo complesso per me scaricare tutto (sempre che il firewall lo permetta) e trovare un programma che lo decodifichi (lavoro sotto linux).

[daniele_dll]

Originariamente inviato da Mich_
Si` ma cosi` facendo ti complichi la vita coni CSS. Se la marcatura e` fatat bene, dimezzi il lavoro per far funzionare il CSS.

credo che a parte qualche cosina non sia troppo malaccio, poi non so

Controlla di non avere il prologo XML o commenti prima del DOCTYPE: IE6 riconosce il DOCTYPE solo se e` all'inizio del file.

Ecco, azz, mi ero scordato di dire una cosa fondamentale: è IE7 solamente, IE6 non lo devo supportare

Ma non potevi mettere in linea la pagina, invece dello zip? E` troppo complesso per me scaricare tutto (sempre che il firewall lo permetta) e trovare un programma che lo decodifichi (lavoro sotto linux).

Quella pagina li fa parte di un software gestionare, dovrei metterlo in linea tutto

Ora che arrivo in ufficio la decomprimo quello zip e lo rimetto online direttamente cosi si può guardare dal browser stesso

[daniele_dll]

fatto

http://www.phpsoft.it/mystuff/shots/temp/Enumerate.htm

[Mich_]

Tanto per iniziare, il validatore HTML da` 190 errori. Non credo che siano tutti reali (probabilmente ad un certo punto non riesce piu` a fare un parsing ragionevole), ma sicuramente errori HTML non sono un buon inizio per sistemare il CSS.
Comunque la maggior parte sono erorori di sintassi: hai dimenticato di chiudere i tag senza tag di chiusura e di usare le entita` per i caratteri che non possono essere usati nelle pagine HTML. In tal caso ci sono degli strumenti in grado di correggere quel tipo di errori: io conosco Tidy, ma ci potrebbe essere anche qualcosa in linea senza la necessita` di installare un sw sul tuo computer.

Tornando al problema specifico:
Sembra quasi che il blocco contenente le clip dei nomi stia sotto a quello che contiene "Elenco" ed "aggiungi": in tal caso non e` questione di margini o di spazi in piu`, ma di un errato posizionamento.
Se hai usato i float, potrebbe esserci un problema di larghezza totale (ricorda che in IE il box-model e` diverso che in altri browser - pero` non dovrebbe esserlo con DTD Strict, ma potrebbe anche essere che con gli erorri del DOCTYPE IE vada in quirks mode).

[daniele_dll]

Originariamente inviato da Mich_
Tanto per iniziare, il validatore HTML da` 190 errori. Non credo che siano tutti reali (probabilmente ad un certo punto non riesce piu` a fare un parsing ragionevole), ma sicuramente errori HTML non sono un buon inizio per sistemare il CSS.
Comunque la maggior parte sono erorori di sintassi: hai dimenticato di chiudere i tag senza tag di chiusura e di usare le entita` per i caratteri che non possono essere usati nelle pagine HTML. In tal caso ci sono degli strumenti in grado di correggere quel tipo di errori: io conosco Tidy, ma ci potrebbe essere anche qualcosa in linea senza la necessita` di installare un sw sul tuo computer.

è strano sinceramente che ci siano tutti questi errori

per carità, è da un 3/4 giorni che non lo testo perché son passato a FF3RC1 e non ci sta l'estensione ancora aggiornata ma non riportava errori (sia le tidy sia l'sgml analyzer, quello del w3c)

probabilmente sono causati dal salvataggio della pagina (boh :\ )

Tornando al problema specifico:
Sembra quasi che il blocco contenente le clip dei nomi stia sotto a quello che contiene "Elenco" ed "aggiungi": in tal caso non e` questione di margini o di spazi in piu`, ma di un errato posizionamento.
Se hai usato i float, potrebbe esserci un problema di larghezza totale (ricorda che in IE il box-model e` diverso che in altri browser - pero` non dovrebbe esserlo con DTD Strict, ma potrebbe anche essere che con gli erorri del DOCTYPE IE vada in quirks mode).

ho capito, si effettivamente la cosa all'inizio mi ha causato non poche rogne nel senso che il posizionamento l'ho fatto giocando sul margine sinistro e quindi non vorrei che da i numeri :\

cmq potrei provare anche con xhtml 1.1, che dici? potrebbe servire a qualcosa?

[Mich_]

cmq potrei provare anche con xhtml 1.1, che dici? potrebbe servire a qualcosa?

XHTML1.1 non puo` venir interpretato da IE6: questo perche` in tale DTD e` obbligatorio il prologo XML, cosa che impedisce che IE6 interpreti il DOCTYPE.

Io ieri avevo cercato di districarmi tra tutti i blocchi presenti, ma mi sono perso.
Tu forse ti ci trovi meglio (si suppone abbia studiato tu la successione e l'innestamento dei blocchi)

Guardando la pagina completa (quindi presicndendo dal codice), io ci vedo:
* uno header, con sfondo azzurrino che contiene tutte le varie icone.
* Sotto a questo due colonne:
- quella a sinistra contenente i due bottoni "elenco" e "aggiungi"
- quella principale contenente in alto il form e sotto i vari riquadri

Verifica che la struttura dei blocchi ricalchi questa struttura logica.
Poi verifica che le due colonne non facciano uso di padding, che aumenta lo spazio solo nei browser standard (mentre viene considerato interno da IE).

[daniele_dll]

k grazie

ora faccio qualche altro controllo e prova, altrimenti rivedo il posizionamento e l'organizzazione del contenuto della pagina e taglio corto