- Home
- Categorie
- Coding e Sistemistica
- Coding
- visualizzazione diversa input text IE e MOZILLA
-
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?
-
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
-
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!
-
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
-
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>
-
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
-
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.......
-
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>
-
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!
-
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