Strano comportamento spaziatura elementi

[Andrea1979]

Salve a tutti, è un po' che non mi occupo di CSS e mi trovo davanti ad un bel (almeno per me) problema:

mi hanno chiesto di fare delle "brevi" modifiche ad un sito esistente (ha un gestionale con custom-tags che vengono tradotti in html) di cui posto una pagina (tra l'altro quella incriminata)

http://green-solutions.no/?lan=engli...e=BioNova&id=4

il problema è nella lista espandibile (quella con i "+") per intenderci: se se ne apre uno solo, lo spazio tra il titolo del paragrafo ed il testo contenuto è a dir poco spaventoso. Se invece ne viene aperto più d'uno, la cosa si normalizza - con l'eccezione della prima voce a comparsa per cui lo spazio resta sempre ampio.

Il CSS che ho aggiunto (scusate i vari !important, ma tutte le proprietà venivano altrimenti sbeffeggiate dal codice esistente che purtroppo non posso toccare) è solo questo:

/* added by Andrea */

.collapsehead_img {
	clear:none!important;
	float:left!important;
	width:13px!important;	
	height: 13px!important;
	padding-right:1em;
	margin-right:1em;
}

.collapse {
	display:none;
	/*background-color:#CC3;*/
}

.collapse_par {
	clear:both!important;
	/*background-color:#C33;*/
}

tutto in fondo al file style.css associato alla pagina.
Il codice javascript che si occupa di visualizzare / nascondere il paragrafo in sostanza non fa altro che cambiare la proprietà display da "none" a "block".
Qualcuno ha idee o suggerimenti?

[Mich_]

Io vedo gravi errori di semantica nella tua pagina. E ritengo che stai usando i float in modo non corretto.

Nel dettaglio:

Perche` usi tutti quei
? In una organizzazione corretta della pagina non servono quasi mai (praticamente servono solo nelle poesie). Invece studia il tag

ed usalo correttamente.

Perche` le liste non sono realizzate con i tag di lista (<ul> oppure [list=1] e[*])?

Perche` le immagini hanno definito vertical-align: baseline;? A parte che il vertical-align si puo` usare solo nelle tabelle (e strutture analoghe), ma se viene interpretato (cosa che qualche browser fa) porta a comportamenti strani, del tipo di quelli della tua pagina.

E comunque sospetto un uso non corretto del clear sulle immagini o sulle strutture che stanno attorno alle immagini.
Nel tuo caso il testo deve girare attorno alle immagini, indipendentemente dal paragrafo (o
come usi tu), mentre sembra che alla fien di ogni immagine ci sia un clear che quindi sposta sotto l'oggetto successivo.

In conclusione:
A mio parere dovresti riscrivere la pagina usando i tag per il loro significato semantico, eliminare tutto il CSS attuale e ricominciare daccapo a sistemare il CSS a partire dagli elementi piu` esterni per concludere con i paragrafi e le immagini.

[Andrea1979]

E' la mia conclusione. Purtroppo il lavoro m'è stato calato così com'è ed ho solo aggiunto, con i tag precedentemente creati per il mini CMS che ci sta dietro, solo quelle 4 righe per la gestione dei paragrafi a comparsa e scomparsa, scontrandomi anch'io con la macchinosità e scorrettezza del sistema. Faccio prima a dire al mio non-cliente che:

- o si tiene il sito senza i paragrafi a scomparsa;
- sgancia più grana e riscrivo gestionale e CSS

Ti ringrazio per la conferma al mio sospetto.