CSS, siblings, javascript

[ubremoved_539]

Voor het maken van een editable select veld heb ik volgende style sheet gevonden

Code: Selecteer alles

select { 
top: expression(this.previousSibling.offsetTop); 
left: expression(this.previousSibling.offsetLeft); 
width: expression(this.previousSibling.offsetWidth); 
position: absolute; 
clip: expression("rect(auto auto auto " + (this.previousSibling.offsetWidth - 20) + "px)"); 
overflow: hidden; 
}

tesamen met volgende HTML code

Code: Selecteer alles

<input name="myfld" type='text'"/><select>...options...</select>

Wanneer ik dit gebruik in een standalone stukje HTML werkt dit prima, echter wanneer ik het gebruik in een applicatie gaat het fout (het dropdown pijltje staat dan compleet ergens anders). Ook moet de select tag tegen de input tag staan, een newline karakter geeft al problemen (vermoedelijk door de previousSibling method, maar het vervangen door document.getElementsByName('myfd')[0] werkt niet). Tevens staat de style sheet nu op alle select tags, wat ook niet de bedoeling is (en een class='stylesheet' op de select werkt evenmin).

Iemand een idee hoe de previousSibling en style sheet wat meer generiek te schrijven ?

[meon]

Advanced CSS, knap
Ik dacht namelijk niet dat die expressions in elke browser werken ...
Ik krijg het in elk geval niet nagemaakt.

Is jQuery een optie? Kan je makkelijker elementen uit de DOM mee selecteren ...
http://os.arandomurl.com/jquerytextbox/

[ubremoved_539]

Ik dacht namelijk niet dat die expressions in elke browser werken ... Ik krijg het in elk geval niet nagemaakt.

Dacht zelfs dat het werkte op een IE 6.

Is jQuery een optie? Kan je makkelijker elementen uit de DOM mee selecteren ...
http://os.arandomurl.com/jquerytextbox/

Alles is eigenlijk een optie, als het maar deftig werkt en vooral een normale look and feel heeft. Probleem is dat het ook een beetje moet integreren met de Struts tag libraries (en daar heeft dit simpel voorbeeldje eigenlijk al een beetje last mee).