compatibilità tra browser

[frenkytribe]

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.

<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.

.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 Opera

Safari

IE e Fierefox

Spero possiate aiutarmi...

 

[powerflash]

a occhio e croce, se hai un div o Td che contiene ognuno dei campi di testo (insieme ad esso anche il relativo div hint) puoi impostare quello come position:relative e di conseguenza l'hint con il suo absolute farà riferimento a quel relative padre, quindi imposti il top e right per l'hint, solitamente così è una via sempre molto standard con tutti i browser.

 

[frenkytribe]

Sì, in pratica nel form ho 5 campi di testo, la struttura è la seguente:

<table>
  <tr>
   <td>
     ----
   </td>
   <td>
     <dl>
       <dd>
          campo1
       </dd>
       <dd>
          campo2
       </dd>
       <dd>
          campo3
       </dd>
       <dd>
          campo4
       </dd>
       <dd>
          campo5
       </dd>
     </dl>
    </td>
   </tr>
</table>

Ho provato ad inserire style="position: relative;" sia al td che in ogni dd, ma non cambia il risultato.

 

[frenkytribe]

Perfetto, alla fine ho risolto giocando con i css, in pratica dovevo impostare la larghezza del <dd> un po' più grande della larghezza degli input. Ad ogni modo grazie.