float e clear....aiuto !!!

[pasqui11]

Qua sto impazzendo....dunque, cerco di spiegarmi, devo fare una pagina con 3 foto e un grosso testo (è un testo dinamico, viene da database quindi non lo posso totalmente controllare)...io voglio che queste 3 immagini mi "flottino" alternativamente a sinistra e adestra del testo...


ho usato per le immagini un codice del genere :

1)

[img]img_news/thumb/prova.jpg[/img]


2)

[img]img_news/thumb/prova.jpg[/img]


3)

[img]img_news/thumb/prova.jpg[/img]



e poi ho inserito il testo (dentro un

). Su firefox tutto bene, le immagini si alternano una sotto l'altra allineate a dx e sx, con il testo che scorre, ma su IE ho grossi problemi, le prime due immagini sono alla stessa altezza, una a sinistra e una a destra, come se non sentissero il clear...

non so se mi sono spiegato bene, mi potreste aiutare ? grazieeeee

[deswign]

non ho capito bene il tuo problema, ma ti consiglio di usare solamente il float:left/right; senza il clear.

[pasqui11]

in pratica vorrei che le immagini siano alternate, ma non alla stessa altezza (una sopra a sinistra, una sotto a destra) con il testo in mezzo...


senza il clear le immagini mi rimangono sulla stessa riga....

[Mich_]

In generale, per ottenere quello che chiedi, si inseriscono le immagini dentro i

(non piu` di un'immagine per ogni

); eventualmente si puo` dare il clear ai vari

.

Nel tuo caso la cosa e` piu` complessa, dato che i

e il loro contenuto vengono inseriti da un agente su cui non hai il pieno controllo, mentre le immagini vengono inserite nella pagina.

Per spiegare meglio il problema potresti postare alcuni spezzoni del codice HTML (come arriva al browser). Ricorda di mettere anche il DOCTYPE.
Hai provato ad usare XHTML 1.0 Strict? Con tale DTD IE6 si comporta molto piu` simile agli altri browser.

Un "trucco" potrebbe essere quello di inserire tra la prima e la seconda immagine un'immagine invisibile, larga quasi quanto la pagina, alta 0px e con il clear:both (oltre che il float). Pero` non so come si comporteranno i vari browser, e inoltre non e` una soluzione che mi piace, in quanto ha necessita` di marcatura supplementare che serve solo per formattazione.

[pasqui11]

provo a postare un pò di codice :


<table width="100%" cellspacing="2" cellpadding="2" border="0" id="Content">

<tr>
<td valign="top" align="left" class="testo-news">
[img]img_news/resize/Tramonto_3.jpg[/img]

[img]img_news/thumb/7_DSCF0635_5.JPG[/img]

[img]img_news/thumb/Ninfee_3.jpg[/img]






TESTO </p></td>

</tr>
</table>


come dicevo ci sono le tre immagini alternate (sx, dx e sx), e poi il testo.... con firefox 2 funziona alla perfezione, con IE6/IE7 rimangono sullo stesso piano, come se non facesse il clear...



I doctype ho provato lo strict ma nulla....

[Mich_]

Troppa formattazione HTML !!

Prova a togliere tutta la formattazione realizzata tramite attributi HTML, spostandola nel CSS: infatti browser diversi hanno comportamenti molti differenti sulla risoluzione dei conflitti tra HTML e CSS.

PS: quando posti del codice, usa i VBcode (ad esempio il bottone # sopra l'area di immissione testo), altrimenti non si capisce l'indentazione.

[pasqui11]

<style type="text/css">
.floatleft{
float: left;
 margin-right: 10px; 
 clear: both; 

}

.floatright{
float: right;
 margin-left: 10px; 
 clear: both; 

}
</style>

  [img]img_news/resize/Tramonto_3.jpg[/img]

 [img]img_news/thumb/7_DSCF0635_5.JPG[/img]

 [img]img_news/thumb/Ninfee_3.jpg[/img]






 TESTO </p>

Nulla da fare, ti allego due screen :

Firefox (OK)




IE

[pasqui11]

faccio un uppino, buio profondo

[deswign]

ho fatto una prova inserendo le immagini dentro al paragrafo e aggiungendo solo float:left o float:right al tag img, mi si vede bene sia in FF che in IE.