Newsgroup: it.comp.www.html
Titolo: Posizionamento: IE vs. Firefox

Ciao, qualcuno sa/vuole rispondermi?
Creo un markup banale di esempio
<table id='container'>
	<tr>
		<td class='left'><a href='tome.htm'>Link</a></td>
		<td class='centro'>
			Contenitore
			<div class='menu'>Elemento posizionato</div>
		</td>
		<td class='right'>&nbsp;</td>
	</tr>
</table>
Inserisco un css in cui la cella di classe centro è posizionata in
modo relativo per creare il contesto di posizionamento assoluto per
l'elemento assoluto 'menu'
td.centro{
	width: 200px;
	position: relative;
	top: 20px;
}
div.menu{
	left: 20px;
	top: 20px;
	position: absolute;
	background-color:#ffa;
}
In IE vedo il posizionamento come lo intendevo io, ovvero l'elemento
posizionato è immediatamente a dx e sotto la cella con il testo
'contenitore'.  In Firefox invece vedo l'elemento posizionato nel
contesto della finestra, immediatamente in alto e sopra la cella con
la dicitura link. Ipotizzo che il baco non sia in IE o Firefox ma sia
nella mia testa. Qualche spiegazione?
Ciao e grazie
InMoDIs

Ciao spero di aiutarti, visto che nessuno ti ha risposto.
Allora prima di tutto vorrei chiarire subito un concetto di
fondamentale importanza, ovvero IE e Firefox usano dei valori di
default per determinati elementi differenti, percui da qui nascono le
differenze.
Poi ad essere sincero, cerco di non impostare mai l'attributo position,
perchè non mi serve, riesco comunque a fare tutto senza, il bello dei
css è proprio questo, tanti modi per raggiungere un solo obbiettivo,
sembrano tutti giusti, ma in realtà poi si celano molti pro e contro
per ogni scelta che hai fatto.
Comunque ecco il tuo codice :
-----stile-------
.left, .right{ width: 200px; }
.menu{ width: 100%; overflow: hidden; }
.menu ul { margin: 0px; padding: 0px; list-style-type: none; width:
200px; float: right; border: 1px solid #f00; background-color:#ffa;}
.menu li { text-indent: 4px; }
.left a { display: block; width: 100%; text-decoration: none; color:
#666; letter-spacing: 1px; text-indent: 4px; border-bottom: 1px solid
#eee; }
.left a:hover { background: #ffa; color: #900; }
#container { width: 768px; margin: auto; }
#container td {  border: 1px solid #eee; }
------------------
<table id='container'>
        <tr>
                <td class='left'><a href='tome.htm'>Link</a></td>
                <td class='centro'>
						<div class='menu'><ul><li>Elemento posizionato</li></ul></div>
						<p>Contenitore</p>
                </td>
                <td class='right'>&nbsp;</td>
        </tr>
</table>
</body>
</html>
Spero di aver risolto il tuo problema
Ciao Nicola

>Ciao spero di aiutarti, visto che nessuno ti ha risposto.
Grazie infinite per il tuoi aiuto; solo che - se capisco bene - forse
non sono riuscito a spiegarmi a sufficienza: in realtà io ho bisogno
(credo) del posizionamento assoluto: devo sottrarre l'elemento dal
flusso del rendering del markup nel browser e devo poter posizionare
l'elemento al di fuori e sopra della tabella: come tu hai proposto
l'elemento rimane all'interno della cella... O mi sbaglio?
In ogni caso ci sono spunti a cui non avevo pensato nel tuo post.
Ciao

}
Trovata  la soluzione
td.centro{
	width: 200px;
	position: relative;
	top: 20px;
	display:	block;	<----------------------------------
}
IE e Gecko hanno idee piuttosto diverse su cosa sia <td>
Ciao