DOMANDA Html chrome e Firefox

Pubblicità
G

Gianlucass01

Nuovo Utente
Messaggi
16
Reazioni
1
Punteggio
20
Salve, ho sviluppato delle pagine html usando sempre google chrome.. Però aprendo la pagina con Mozilla ho notato che qualcosa è un po' diverso tipo un immagine è spostata molto più in alto rispetto a chrome e altre cose... Non c'è un modo per far uscire la stessa cosa sia su chrome che su Firefox?
 
in particolare, l'immagine su chrome mi esce posizionata bene e su firefox mi esce più in alto
Codice: 
<html>
<head>
<style>
body{
    margin: 0px auto;
    background-color: #f1feff;
}    

form {
    z-index: 1;
    position: absolute;
    border: 3px solid #808080;
    width: 500px;
    height: 440px;
    left: 32%;
    top: 16%;
}

#user {
    position: absolute;
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    bottom: 45%;
    right: 8%;
}

#psw {
    position: absolute;
    width: 85%;
    padding: 12px 20px;
    margin: 8px 0;
    bottom: 25%;
    right: 8%;
}

#btn {
    position: absolute;
    bottom: 10%;    
    left: 41%;
    outline: none;
    cursor: pointer;
    text-align: center;
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #fff;
    padding: 10px 20px;
    border: solid 1px #0076a3;
    background: #0095cd;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

#logimg {
    z-index: 2;
    position: relative;
    top: 18%;
    display: block;
    margin: 0px auto;
    width: 10%;
    border-radius: 50%;
}

#btn:hover {
    opacity: 0.8;
}

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
</head>
<body>
    <img id="logimg" src="./foto/login.png">
    <form method="POST" action="mappa.php">
    <table cellspacing="30px">
        <tr><td><h3 style="position: absolute; bottom: 55%;">Username:</h3> </td><td> <input type="text" id="user" name="Username" placeholder="Inserisci l'username" required oninvalid="this.setCustomValidity('Inserisci il tuo username!')" oninput="this.setCustomValidity('')"> </td></tr> <br><br>
        <tr><td><h3 style="position: absolute; bottom: 35%;">Password:</h3> </td><td> <input type="password" id="psw" name="Password" placeholder="Inserisci la password" required oninvalid="this.setCustomValidity('Inserisci la tua password!')" oninput="this.setCustomValidity('')"> </td></tr> <br><br>
        </table>
        <input type="submit" id="btn" name="invia" value="LOGIN">
    </form>
</body>
</html>
 
Quando una proprietà non viene specificata nel CSS, il valore di quella proprietà viene assegnato dal browser (i così detti valori di default). È possibile che Chrome e Firefox assegnino un valore di default diverso ad una stessa proprietà.

Per esempio Chrome ha un margine di default di 8px, Firefox di 4px. Se non indichi il margine nel CSS allora ti ritroverai con due valori di default diversi e la pagina risulterà differente fra i due browser.

Per risolvere il problema alcuni sviluppatori includono nelle loro pagine HTML un resetter che permette di uniformare l'aspetto degli elementi fra tutti i browser. Qui puoi trovare un esempio di resetter. I resetter possono essere "aggressivi", ovvero annullare proprietà che magari possono tornarti utili. Qui trovi un resetter meno invadente del primo che ti ho linkato.

@Mursey visto che partecipi alla discussione correggimi se sbaglio, magari è un problema più semplice.
--- i due messaggi sono stati uniti ---
Ho risolto aggiungendo nel CSS:
CSS: 
body {
    width: 100%;
    height: 100%;
}
La posizione dell'immagine (visto che hai usato relative) è relativa alla sua posizione normale che a sua volta dipende dal suo contenitore. Il contenitore dell'immagine è il body ma la dimensione del body non è stata specificata nel CSS. È probabile che il body avesse dimensioni diverse nei due browser (proprio perché non era specificato avevano diversi valori di default).
 
Ultima modifica:
Pubblicità
Pubblicità
Indietro
Top