• D
    User Newbie •

    visualizzazione diversa input text IE e MOZILLA

    Ciao ragazzi,
    sto diventando pazza a capire perché in una semplice form con 2 input type text mi vengono messi spazi in automatico x IE come se ci fosse un margin=1 mentre con MOZILLA lo vedo bene.

    Questo è il form nell'HTML:
    <form>
    <div class="boxRegText">
    <INPUT type="text" name="utente" value="Utente" class="login"><br>
    <INPUT type="text" name="password" value="Password" class="login"><br>
    <input name="entra" type="image" src="images/entra.gif" alt="entra" align="bottom"></div>
    </form>

    E questi gli stili usati:
    .boxRegText {margin-left:10px;}
    input.login { border:1px solid #6BBCDB;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    width:150px;
    height:14px;
    margin-top:0px !important;
    margin-top:-1px;
    margin-bottom:5px;
    background-color:#FFFFFF;
    color:#0C5D9E;}

    Riuscite a capirci qualcosa?

    0
  • P
    User Attivo •

    In che senso spazi in automatico? dove esattamente?

    Calcola che i browser renderizzano i campi form in modi diversissimi, da mettersi le mani nei capelli... tra bottoni di explorer con 20 spazi vuoti a destra e a sinistra e Opera che quasi non ci fa stare il testo...

    Menu a tendina di IE6 che stanno sopra ai layer cascasse il mondo...

    keiske

    0
  • D
    User Newbie •

    Gli input type=text è come se avessero impostato un margin=1 in IE mentre in Mozilla no. Come posso levargli sto pixel?
    Ho provato ad usare !important ma non lo considera!

    0
  • P
    User Attivo •

    quindi margin su tutti e 4 i lati...

    Allora, se non ricordo male.. la butto lì... prova a dare ai campi text un display:inline; oppure prova ad usare il padding al posto del margin perchè IE non applicai i margin a tutti gli elementi (allora forse con inline li fai applicare, se no provi col padding)...

    keiske

    0
  • D
    User Newbie •

    No niente da fare, ho fatto tutte le possibili combinazioni!

    <style>
    HTML { PADDING:0;
    MARGIN:0;}
    BODY { PADDING:0;
    MARGIN:0;}
    .boxRegText {margin-left:10px; padding:0px;}
    input.login { border:1px solid #6BBCDB;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    width:150px;
    height:14px;
    margin-bottom:5px;
    background-color:#FFFFFF;
    color:#0C5D9E;
    display:inline;}
    form {margin:0px;
    padding:0px;}
    </style>

    <BODY>
    <form>
    <div class="boxRegText">
    <INPUT type="text" name="utente" value="Utente" class="login"><br>
    <INPUT type="text" name="password" value="Password" class="login"><br>
    <input name="entra" type="image" src="images/entra.gif" alt="entra" align="bottom"></div>
    </form>
    </BODY>

    0
  • P
    User Attivo •

    Allora devi andare di "brute force"

    Cava tutti gli style e applicali localmente uno a uno... consiglio... io di solito se voglio controllare al meglio un input lo incapsulo in uno span o in un p perchè input è un tag che è veramente trattato da cani dai browser...

    keiske

    0
  • D
    User Newbie •

    Niente da fare!!!! Ho scoperto che in IE si mantiene SEMPRE uno spazio sopra e uno sotto come se ci fosse un MARGIN-TOP:1px e MARGIN-BOTTOM:1px
    Non posso neppure dirgli MARGIN:-1px 0; perché se no su MOZILLA sale!

    <div style="margin:0;">
    <INPUT type="text" name="utente" value="Utente" style="border:1px solid #000000;margin-top:0;margin-bottom:0;height:20px;"><br>
    <INPUT type="text" name="password" value="Password" style="border:1px solid;margin-top:0;margin-bottom:0;height:20px;"></div>

    Se qualcuno ha una risposta da darmi.......

    0
  • D
    User Newbie •

    Questa non la sapevo, pare che IE7 legga i css ancora in modo diverso.
    Infatti con !important avevo risolto il problema ma solo su IE6.
    Ecco come ci si deve comportare:

    <style>
    BODY { PADDING:0;MARGIN:0;}

    input.prova {
    margin-top: 0px !important;
    margin-top: -1px;
    margin-bottom: 0px !important;
    margin-bottom: -1px;
    border:1px solid #000000;height:20px;
    }
    </style>

    <!--[if IE 7]>
    <style>
    input.prova
    {
    margin-top: -1px !important;
    margin-bottom: -1px !important;
    border:1px solid;height:20px;
    }
    </style>
    <![endif]-->

    </HEAD>
    <BODY>
    <div style="margin:0;">
    <INPUT type="text" name="utente" value="Utente" class="prova"><br>
    <INPUT type="text" name="password" value="Password" class="prova"></div>
    </BODY>

    0
  • K
    Super User •

    Ciao Danigy e benvenuto nel forum GT 🙂

    Non ho l'esempio a portata di mano quindi anche per farti aiutare meglio dagli altri utenti prova a mettere una risorsa online visibile a tutti poichè ci alleggerirebbe molto le cose per poterti aiutare 🙂

    Prova dando ai campi un "overflow:hidden".

    Altrimenti , dopo averla buttata li, vi sono altre possibilità ma ti rimando alla richiesta sopra citata , ciao!

    0
  • D
    User Newbie •

    Ti ringrazio ma ho risolto il problema e nella mia risposta precedente ho scritto il modo con cui ho risolto.
    Praticamente IE7 ha ancora un altro modo di interpretare gli input e perciò aggiungendo nella pagina il codice che ho scritto prima in rosso FUNGE.
    Grazie:ciauz:

    0
Effettua l'accesso per rispondere