testo intorno ad immagine

[Gio&Ste]

ho usato il seguente codice per avere l'effetto del testo intorno all'immagine:

#articolo div.immagine {
width:auto;
padding:5px;
font: .70em verdana, helvetica, sans-serif;
margin:0px 10px 10px 0px;
border:1px solid #F93;
float:left;
}
#articolo div.immagine img {
border-bottom:3px solid #F93;
display:block;
padding-bottom:1px;
}

Ho un piccolo problema con IE, il div immagine occupa tutto lo spazio a disposizione.
E' il solito bug di IE? C'è un modo per ovviare a questo inconveniente? Purtroppo le foto non hanno sempre le stesse dimensioni. Con FF 1.5 e Opera funziona tutto bene!

[seed_squall_it]

Bug a parte (e IE ne è pieno!), non capisco molto il tuo codice...da quello che vedo, hai reso flottante l'intero box che contiene il testo, mentre l'immagine l'hai lasciata posizionata staticamente. Non mi sembra molto corretto.
Se hai un codice XHTML fatto così:

<div class="articolo">
[img]IMMAGINE.jpg[/img]

...TESTO...</p>
</div>

il CSS per creare l'effetto del "testo intorno" è:

.articolo p {
padding: 5px;
font: .70em verdana, helvetica, sans-serif;
border: 1px solid #F93;
/* tenendo tutte le tue impostazioni, tranne i margini,
ma non so se sono esatte ora che il codice è cambiato... */
}

.articolo img {
float: left;
}

Poi ovviamente devi utilizzare i padding e/o i margin per distanziare il testo dall'immagine. Ricorda anche di non impostare il margin-left delle immagini flottanti su un valore diverso da 0, altrimenti IE te lo raddoppia!

[Gio&Ste]

Il codice è quello di questo link

io ho solo modificato il width che li era fisso di 200 px ad uno auto!!! IN FF e Opera si vede quello che voglio e con IE che non va!!!

[seed_squall_it]

Sì, ma il tuo codice XHTML è uguale a quello che c'è nell'esempio che hai seguito?
Poi cmq hai provato a usare il codice che ti ho postato? Perché oltre ad essere più leggero (ha un <div> in meno), sfrutta il vantaggio di rendere flottante l'immagine stessa e non il box che la contiene. COsì facendo, l'immagine diventa elemento a livello di blocco e tu puoi impostare padding, border e margin come preferisci. Certo, se ti serve anche la didascalia sotto l'immagine, usare un <div> apposito per contenere quest'ultima è obbligatorio, ma IE ha un sacco di bug relativi ai box successivi a box flottanti, quindi bisogna cercare una soluzione appositamente per quel browser. Per questo la soluzione più semplice resta quella che ti ho postato. Non l'ho provata su Opera, ma su Firefox e IE5/6 funziona, quindi non dovrebbe avere problemi nemmeno su browser aderenti agli standard.