Topic: Xhtml+css validato,ma div che non si autoridimensiona

[lionheart]

Ciao, spero che il titolo non sia troppo criptico, ma non sapevo come riassumere il tutto.

Per la mia homepage (essendo carente in fantasia) mi sono affidato ad un template già pronto preso da http://www.oswd.org/ e precisamete ho scelto questo .

é stato creato con photoshop (e un pò si vede) ed è stato validato (sia da loro che da me) con il validator del w3.org.

Però come potete vedere il secondo box blu esce dallo sfondo bianco (è un div che si dovrebbe autoridimensionare).... e questo è il mio problema.

ho necessita che si autoridimensioni.....perciò pensando che fosse un errore del creatore sono andato a modificare il css per impostare l'height del div su auto o 100%....però con firefox non sortisce nessun effetto (non si ridimensiona mai, anzi con il settaggio auto si riduce pure).

con ie 6 invece anche senza modifiche si visualizza correttamente.

mi sapete suggerire un modo per sistemare la cosa? un problema di standard non credo che sia dato che è stato validato....però non riesco a trovare una soluzione...spero mi possiate aiutare


grazie

[lucasali]

la pagina che hai lincato io la vedo bene...
potresti darci il link della tua home e fare gli screen di quello che vedi su IE e di quello che vedi su FF?

[lionheart]

grazie della risposta.oramai non ci speravo più 

al momento non è stato caricato sul mio server.

lo sto "testando" in locale anche perchè i risultati stampati saranno risultati di una ricerca con un mio motore di ricerca (per cui voglio essere sicuro che tutto sia a posto)


però ti posto gli screen...basta anche solo la pagina linkata per far vedere il risultato

questo con internet explorer 6

e questo con firefox 2 (su os Windows Xp)

ho provato anche con un nuovo profilo (dato che ieri ho disinstallato e reinstallato firefox dopo una pulizia) e l'ho fatto provare ad altri. Tutti la stessa visualizzazione errata con firefox.


ho provato anche ad esasperare il box copiando ripetutamente il contenuto....risultato....con internet explorer il div bianco viene ridimensionato....con firefox no. Nessun problema invece per la pagina e il box blu


grazie della cortese attenzione

[lucasali]

la cosa è abbastanza complicata ma è normale che sia così... provo a spiegarla
IE interpreta height a modo suo infatti espande i div per farci stare il contenuto anche se tu gli indichi una misura fissa
se tu visualizzi la pagina con una risoluzione diversa, ad esempio maggiore di 1024x768 ti accorgerai che la vedi correttamente anche con FF, è per questo che io non capivo il problema...
allo stesso modo se visualizzi solo il frame http://www.oswd.org/files/designs/2993/Revival2/ senza quello superiore dovresti vederlo correttamente.

quindi se il tutto deve dipendera dal contenuto per ottenere lo stesso risultato in FF (o qualsiasi altro browser che rispetta gli standard) devi usare min-height (che IE ancora non supporta) e vedrai che non avrai problemi

[lionheart]

effettivamente hai ragione, anche se il problema resta leggermente anche senza frame.

però nn posso usare un min-height (dovrei mettere un valore generico che vada bene per tutti, un pò antiestetico però) dato che non so a priori la dimensione del box (ed impostandolo su 100% non sortisce alcun effetto, ma resta invariato).....unica possibilità questa?

mi servirebbe proprio l'autoridimensionamento che ottengo con IE impostando l'height del box su auto o 100%.....a meno che ignori quache peculiarità del min-height non mi risolverebbe pienamente il problema 

[lionheart]

proprio nessuna idea?

[lucasali]

ma hai provato a mettere min-height al posto di height?

[lionheart]

credevo si capisse.

allora in modo esplicito 

ho provato a sostituire height con min-height ma se mantengo il valore percentuale (100%) non cambia nulla, ovvero il div preso in considerazione non modifica la propria dimensione restando più piccolo.

con un valore invece in pixel si, le dimensioni aumentano....però non è la soluzione ideale dato che metterei un valore generico in pixel e non si adatterebbe perfettamente al contenuto


grazie della pazienza

[indigo]

Prova ad aggiungere prima della chiusura del div contenitore (quello che rimane corto) questa riga

Codice: [Seleziona]

<div style="clear: both;"> </div>
e fammi sapere..

[lionheart]

 

grazie, grazie GRAZIE GRAZIE

finalmente ho risolto grazie a te..... funziona....ora non mi resta solo che implementare il codice adeguato che differenzi il codice per firefox ed internet explorer dato che è necessario usare il min-height....cosa da poco a questo punto

ora mi docuemento sul codice che mi hai fornito... giusto per sapere cosa ho fatto 


grazie ancora, della pazienza e dell'aiuto

ciauzz

[indigo]

Di niente!

In genere il problema per FF è dato dalla proprietà "float" che estrae l'elemento dal flusso normale degli oggetti nella pagina.. questo fa sì che il contenitore non "senta" l'elemento, è come se lo ignorasse, e tenda ad essere più corto (non è un comportamento corretto)..

mettendo il div che ti ho indicato alla fine "stabilizzi" il tutto perché la proprietà "clear" neutralizza il float..

se ti interessa sapere qualcosa di più prova qua:

- http://www.w3.org/TR/CSS21/visuren.html#floats

e i due sotto-capitoli:

- http://www.w3.org/TR/CSS21/visuren.html#float-position
- http://www.w3.org/TR/CSS21/visuren.html#flow-control

[lionheart]

ti ringrazio ancora per le nuove info, leggerò con molta attenzione ed interesse quegli articoli.

grazie ancora