css sia per IE sia per firefox

mrblade

css sia per IE sia per firefox

Ciao, ho un problema... ho realizzato un div di due colonne ma il risultato è differente a seconda del browser utilizzato:
La pagina incriminata è http://www.bladexperience.com/infotestpage.php.

Su firefox viene tutto spostato mentre su IE si vede abbastanza bene (strano). Per risolvere il problema con ff dovrei mettere un <p> </p> tra un div e l'altro ma in questo modo su ie la distanza tra questi diventa colossale. Come posso fare? Grazie!
Eccovi uno spezzone di codice:

Css:


.SX {
   float: left;
   width: 10%;
   }
.DX {
   float: left;
   width: 90%;
   margin-top:5px;
  }

Html:


<p> 
<div class="SX"><img src="images/plus.gif" /></div>
<div class="DX">Ciao ciao testo di esempio</div>
</p>
       
<p> 
<div class="SX"><img src="images/plus.gif" /></div>
<div class="DX">Secondo esempio blablabla blablabla blablabla</div>
</p>

massy

Ciao.

Mi spieghi il senso di fare una pagina mezza con table e mezza tableless?
Btw il problema è la mancanza di dichiarazione clear nella parte che ti appare spostata.
Dovresti ogni volta dargli un clear:left.

Personalmente io agirei così:
<div>immagine con la più, larghezza xxx posizionata in modo assoluto rispetto al div posizionato in modo relativo<p>testo con padding sinistro del 10%</p></div>

Io cmq ti consiglio di studiare bene come funziona il box model, toglierei tutta la parte oscurata dai css, toglierei tutti quegli align="left" ed ovviamente tutte le tabelle che non servono a nulla, i vari <br /><br /><br /> e così via.

In pratica: prima di peggiorare il codice tabellare con uno osceno xhtml prova prova prova

mrblade

lo so, hai ragione... in effetti c'è un po' di confusione. Mi sono avvicinato da poco al css e la mancanza di tempo fa il resto.

Non ho capito bene quello che vuoi dire... forse sarebbe meglio un esempio pratico
Ho provato a cambiare qualcosa ma il problema comunque resta la differenza di spazi tra ie e ff. Questa volta su ff si vede bene mentre su ie il testo viene leggermente alzato. Provando a modificare i margini c'è sempre troppa differenza...

Css:


.SX {
   float: left;
   width: 7%;
   clear:left;
   margin-top:13px;
   }
.DX {
   float: left;
   width: 90%;
   margin-top:18px;
  }

massy

Esempio pratico?

<div style="position:relative">
    <img src="plus.gif" alt="" style="position:absolute"/>
    <p style="padding:0 0 0 10%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

mrblade

credo di esserci quasi...
sia con ie sia con ff si vede bene. Secondo te il risultato è soddisfacente o è meglio che tolga tutte quelle icone?
Grazie di tutto.

Ho trovato maggiore aiuto qua che in altri forum più conosciuti, complimenti, tornerò a inondarvi di domande

Mr Blade