Ciao a tutti,
in un form html per la registrazione al sito, ho aggiunto degli hint o tip nei campi di testo, che danno delle informazioni riguardo cosa si può o non inserire dentro quei campi.
Questi hint sono in CSS e jQuery, il jQuery non fa altro che tradurre il tag <span> nell'hint vero e proprio in CSS, quindi concentriamoci sul CSS.


codice HTML:
<input type="text" name="username" class="reg" value="Scegli il tuo Username" >
<span class="hint">
    L' username deve essere compreso tra <b>5</b> e <b>20</b> caratteri.<br>Puoi usare lettere maiuscole e minuscole,<br>numeri, <b>.</b> e <b>_</b>
    <span class="hint-pointer">&nbsp;</span>
</span>

Quindi selezionando il campo "username" si aprirà questo messaggio.
Ed ecco il CSS.


codice:
.hint {
       display: none;
    position: absolute;
    width: 200px;
    margin-left: 5px;
    text-align: left;
    margin-top: -35px;
    border: 1px solid #6ec0ff;
    border-radius: 3px;
    padding: 10px 12px;
    background: #cce9ff url(../image/pointer.gif) no-repeat -10px 5px;
}


.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(../image/pointer.gif) left top no-repeat;
}

In pratica questo hint deve apparire alla destra dell' input, ma ecco cosa succede:
su Chrome e Opera stanno al loro posto;
su Safari sono centrati in altezza ma si vedono a sinistra;
su Firefox e IE sono allineati a destra ma non sono centrati con l'input.


Posto delle foto per capire meglio.


Chrome e Operachr-opr.jpg

Safarisafari.jpg


IE e Fierefoxie-moz.jpg


Spero possiate aiutarmi...