• User

    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>
    
    

  • Moderatore

    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

    :ciauz:


  • User

    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;
      } 
    
    

  • Moderatore

    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>
    
    

    :ciauz:


  • User

    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