min-height ostinata

[pictor]

Ho la home page del mio sito che mi sta dando problemi.

Il div centrale (Area comune) dovrebbe avere un'altezza proporzionale al suo contenuto. Deve comunque avere un'altezza minima.

Ho messo l'hack per la min-height su IE.

.articoloneComuneRow {
	padding: 5px 0px 5px 0px; 
	font-family : verdana, arial, sans-serif;
	font-size: 10px;
	border-left: 1px solid #FFBD00;
	border-right: 1px solid #FFBD00;
	border-bottom: 1px solid #FFBD00;
	background-image: url(../img/angolo2Comune.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color : #FFFFFF;
	color: #000000;
	width: 725px !important;
	width: 730px;
	margin: 0px;
	min-height: 196px;
	height: auto !important;
	height: 196px;
}

Su IE funziona e si allunga fin sotto il blocco grigio. Su Firefox invece si vede come nello screenshot allegato.
Come vedete il div prende l'altezza del min-height, ma non si allunga in base al contenuto.

La dimensione corretta è invece quella del bordo rosso (applicato con la Web Developer Toolbar di firefox).

[eliminato immagine]

Qua un pò di HTML della parte interessata.
Il codice XHTML 1.0 Strict è validato. Quindi non è un problema di parsing

<div id="rowup">
			<div class="titloneComuneRow">
				<table summary="Tabella contenente il link al portale 'Area Comune'" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><th>Area Comune</th></tr></table>
			</div>
			<div class="articoloneComuneRow">
			 <div id="newsBlock">
			  <div class="innerNews">
				<p class="titoloPiccoloNews">ULTIME NEWS</p>	
				    


					 27/10/2006 

				    <b class="underline">sdfsdf[/b](Piccoli Comuni)
sdfsdf
					</p>			
				</div>
			</div>
			<div id="lastInsertBlock" class="innerLastInsert">
							<p class="titoloPiccoloLastInsert">INSERIMENTI DEL 02/11/2006 (XXX.it):</p>
							<table summary="Tabella contenente i collegamenti presenti nella homepage di XXX.it">
									<tr>
										<td><table width="100%" border="0" cellspacing="0" cellpadding="2" summary="Inserimento numero 2"><tr><td>
														<span class="ReformPath">Organi-Amministratori &gt; Partecipazione popolare </span>

														<span>Provincia di XXX</span>
														<span class="ReformFonte">(decidi.it)</span>
													</td></tr></table>
										</td>
									</tr>
						</table>
			</div>
			<div id="linkBlock">
			<ul class="list">
						[*]			
							<span class="catLink">Provincie affiliate</span>
							<hr />
							<ul>[*][img]img/link1.gif[/img]<a href=">Provincia</a>

Il portale della Provincia di XXX.</p>[/list]
							


						
				[/list]
		   </div>
		  </div>
		</div>
</div>

Dove sta l'errore secondo voi?

Grazie mille

Su richiesta dell'interessato, modificato alcuni link

[pictor]

UP!

Nessuno ha proprio idea?

Solitamente da cosa è causato il non redimensionamento di un div rispetto al suo contenuto?

[Mich_]

Non riesco a seguire il discorso (non riesco a capire il problema).

L'unica cosa che ti posso consigliare e` togliere l'hack per IE e vedere come si comporta FF.
Gli hack sarebbero da evitare (per problemi con IE7), e sostituirli con i commenti condizionali di IE, ma non ho mai sentito di problemi su FF/Moz dati da quell'hack in particolare.

Altro consiglio: fai passare la pagina e il CSS dai validatori: potrebbe esserci un errore di sintassi, di quelli che IE non vede (e potrebbe essere in un punto qualsiasi del CSS/HTML).

[pictor]

Domani provo a rimuovere l'hack e vi faccio sapere. Ma credo che farò peggio che meglio

[Mich_]

Adesso ho capito. - cancella quanto scritto sopra -
Quella cosa succede, di solito, se ci sono dei float inseriti all'interno di blocchi che non sono float (o dei posizionamenti assoluti assieme a posiz non-assoluti)

La cosa piu` semplice, di solito, e` rendere tutto float (quindi nel tuo caso il contenitore, quello contornato di giallo-ocra). Non dovrebbe avere controindicazioni, ma provalo con attenzione.