Ciao a tutti!

Premetto subito che non sono un grande esperto di CSS, quindi mi rivolgo a voi per chiedervi un aiutino.

Ciò che vorrei fare è questo: vorrei realizzare un semplice box che contiene del testo... Il box ha dimensione orizzontale fissa e verticale variabile... Questo box inoltre deve avere un bordo costituito da una serie di immagini usate come sfondo in elementi che si trovano "attorno" all'elemento di testo centrale.

Leggendo un po' di guide sul sito html.it ho trovato una soluzione al mio problema che utilizza la proprietà "display", una soluzione però che ho scartato poichè non compatibile con Internet Explorer. Allora ho provato ad utilizzare la classica soluzione con una "griglia" di 9 div, disposti in una matrice di 3x3 utilizzando opportunamente la proprietà "float".

Tutto funziona bene tranne che per un particolare: l'immagine che dovrebbe rappresentare lo sfondo dei bordi sinistro e destro non si espande correttamente in verticale.

Eccovi l'esempio che ho realizzato:

http://www.codoweb.com/test_css/

Come potete vedere c'è un body che ho tracciato con bordo nero, il box che contiene il testo con bordo verde ed in rosso i due bordi verticali che non si espandono correttamente. Per quelli orizzontali invece tutto funziona bene in quanto la dimensione orizzontale del contenitore è nota ed è pari al 50%, mentre l'altezza del contenitore l'ho settata su "auto" in modo tale che contenga esattamente il testo.

Credo che il problema sia questo: essendo "auto" il browser non sa bene come gestire l'altezza di quei bordi interni. Firefox 3 non traccia per niente quei bordi mentre Internet Explorer 7 ne traccia solo un pezzetto.

Sapete aiutarmi? Un grazie anticipato a chiunque mi sarà d'aiuto!