Ciao a tutti, sto sperimentando con css e volevo creare una casella di testo che normalmente è solo testo, ma muovendoci il mouse sopra diventa una casella editabile. Ho provato a scrivere questo codice:

per l'html:
codice:
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova.css">
<script>

var status = 0;

function over()
{
	if (status == 0){
	d = document.getElementById("d");
	box1 = document.getElementById("box1");
	
	t = box1.value;
	
	d.innerHTML = "<input type='text' id='box2' value='" + t +
               "' onMouseOut='out();'>";
	
	status = 1;
	}
}

function out()
{
	if (status == 1){
	d = document.getElementById("d");
	box2 = document.getElementById("box2");
	
	t = box2.value;
	
	d.innerHTML = "<input type='text' id='box1' onMouseOver='over();' 
                 value='" + t + "' >";
	
	status = 0;
	}
}

</script>
</head>

<body>
Inserire nome: 
<span id="d" ><input type="text" id="box1" onMouseOver="over();" value="prova"></span>
</body>
</html>
e per il css:
codice:
#box1
{
border-style: none;
margin-left: 2px;
margin-top: 2px;
color: Blue;
font-family: Arial;
font-size: 12pt;
width: 300px;
}

#box2
{
font-family: Arial;
color: Blue;
font-size: 12pt;
width: 300px;
}
Nel codice, box1 rappresenta l'ipotetica "label" mentre box2 rappresenta la textbox. Ora, il tutto sembra funzionare (perdonate magari l'incorrettezza del codice ma sono esperimenti), ma ottengo un effetto indesiderato: nel cambio tra label/textbox il testo si sposta di qualche px in basso a destra, perché ovviamente il label non ha margini mentre la casella di testo sì. Ho provato a risolvere mettendo come si vede nel codice margin-left e margin-top a 2px, e in questo modo funziona (alternando label/textbox il testo non si muove) MA ho scoperto che 1) funziona solo in firefox dove ho fatto i test, ad esempio in chrome forse devo mettere 3 o 4 px; 2) se ingrandisco o rimpiccolisco lo zoom nella schermata, anche in firefox stesso il testo si sfasa di nuovo (perché immagino che se per esempio rimpiccolisco tutto anche lo spessore della textbox rispetto alla label diventa minore dei 2px quindi si risfasa tutto).

Qualcuno ha qualche idea da suggerirmi per rendere questa cosa funzionante in (si spera) tutte le situazioni in modo elegante?

Grazie!