[CSS 2] problemi con Firefox su un box

[gordian]

Ciao a tutti,
avrei un box determinato, da questo codice, creato per contenere immagini e testi proprio come se fosse una tabella:

.program 
{
position:relative; 
margin-top: 5px; 
padding-right: 5px; 
padding-left: 5px; 
padding-top: 3px; 
padding-bottom: 3px;
clear: left; 
border-right: #99cccc 1px solid; 
border-top: #99cccc 1px solid;
border-left: #99cccc 1px solid; 
border-bottom: #99cccc 1px solid;  
background-color: #ecf9ff;
} 

All'interno di questo box ci avrei inseito un'immagine con alla sua sinistra un breve testo...
Su EXPLORER tutto ok, su FIREFOX succede che se l'altezza dell'immagine è superiore all'altezza che si creerebbe all'interno del box dopo aver inserito il testo, praticamente il box si adatta al testo e non all'immagine. Quindi questa, seppur contenuta al suo interno, esce creando un effetto sgradevole.
Posto il codice:

<table width="400" border="0" cellspacing="0" cellpadding="0">
<td class="tabel_centr" > 
<div class="program"> 
[img]../images/img_grandi/anteprima.jpg[/img] 
<h3>titolo</h3>


Categoria: sport.


testo

testo

testo</p>
</div>
</td></tr></table>

Potreste correggermi il css per cortesia?
Grazie.

[salasir]

Prima di tutto si può alleggerire un po' il codice CSS:

.program  
{ 
position:relative;  
margin-top: 5px;  
padding: 5px 5px 3px 3px;   
clear: left;  
border: #9cc 1px solid; 
background-color: #ecf9ff; 
}

Poi, a parte il fatto di usare le tabelle (Butto lì l'utilizzo di "liste di definizione" vedi qui alcuni esempi) mischi del codice CSS con le formattazioni in linea vecchio stile. Ciò può crearti problemi quando per caso due definizioni si sovrappongono: il browser non sa + quale scegliere. E' meglio togliere tutto dal codice html e definire tutto nel CSS.
Per il tuo problema puoi aggiungere la dimensione al box

.program  
{ 
position:relative;  
margin-top: 5px;  
padding: 5px 5px 3px 3px;
clear: left;  
border: #9cc 1px solid; 
background-color: #ecf9ff; 
height: 140px; 
}

[gordian]

Originariamente inviato da salasir
Per il tuo problema puoi aggiungere la dimensione al box

.program  
{ 
position:relative;  
margin-top: 5px;  
padding: 5px 5px 3px 3px;
clear: left;  
border: #9cc 1px solid; 
background-color: #ecf9ff; 
height: 140px; 
}

Non posso
Alcuni box non contengono l'immagine e un'altezza di 140 px non sarebbe adeguata...
E poi non mi pare ci sia nessuna sovrapposizione di stili usando quelli in-line (che secondo me non sono "vecchio stile").
In una lista di definizione non potrei usare <h1> e

...

[salasir]

Originariamente inviato da gordian
E poi non mi pare ci sia nessuna sovrapposizione di stili usando quelli in-line (che secondo me non sono "vecchio stile").

Per vecchio stile intendevo hspace, border, ecc..

Originariamente inviato da gordian
In una lista di definizione non potrei usare <h1> e

...

Se è per questo non potresti usare nemmeno un <div> all'interno di una tabella!
Comunque il problema di <h1> e

sono tranquillamente superabili dando le oppertune caratteristiche al tag <dt> (al posto di <h1>) e <dd> (al posto di

), Ma il mio era solo un esempio di sostituzione delle tabelle con formattazione a base di CSS.

[gordian]

Anche se tolgo il DIV dalla tabella il problema rimane. Non è dato dall'uso combinato di CSS 2 con tabelle o elementi in line HTML.
Si tratta di capire come modificare il codice del DIV secondo me... :master: