position:absolute e padding su IE

[zoom]

ho un dubbio... stupido ma non riesco a venirne fuori...

In una pagina ho un div position:relative
al suo interno ho due elementi: un'immagine e del testo
Per vari motivi mi serve che l'immagine sia posizionata in modo assoluto a sinistra.
Quindi non ho fatto altro che mettere un padding al div esterno di dimensione uguale all'immagine e posizionare in maniera assoluta l'immagine left:0;

Su FF tutto ok, su IE l'immagine parte esattamente da dove finisce il padding, quindi va sopra al testo

<div class="elementoTop10_attivo">
[img][/img]<span class="dim5 color3">#titolo#</span> 
</div>

.elementoTop10_attivo{
	position:relative;
	padding-left:32px;
}
.elementoTop10_attivo img{
	position:absolute;
	left:20px;
	top:5px;
}

l'immagine su IE6 appare SOPRA il testo

[digital00]

Perchè non dai all'immagine un left: 52px e metti il testo tra i tag p con padding-left: 32px? aggiungendo quindi:

.elementoTop10_attivo p {
	margin: 0px;
	padding-left:32px;
}

[Mich_]

Il padding e` una brutta bestia se lo usi con IE.

Puoi passare ad XHTML 1.0 strict (e con questo metti IE in standard mode - vuol dire che reagisce molto simile agli altri browser)
oppure puoi mettere il margine sinistro al contenitore del testo (tu usi uno <span>, ma sarebbe piu` corretto un

)

Tieni presente che l'uso dei posizionamenti assoluti e` una delle cose piu` complesse nei CSS (e che comporta effetti collaterali a volte imprevedibili in qualche brwoser): va usata solo quando strettamente necessario.

[zoom]

ho seguito l'idea di digital00...
ho messo il padding al testo invece che al div contenitore.
Sembra funzionare correttamente ora...

[digital00]

Ma ascolta anche Mich quando ti dice di usare il posizionamento assoluto solo se strettamente necessario. Se ad esempio si tratta di un semplice paragrafo con immagine allineata a destra allora basta dare float: right all'immagine.. guarda un po te.

Ciao!