Problème de déplacement d'un bloc <div> avec FireFox
Publié : 08 oct. 2005, 13:43
Bonjour à tous,
étant nouveau dans le monde du Javascript j'écrit des petits bout de code par ci par là pour tester les differentes possibilite offerte par JS.
Je buche sur mon premier problème depuis maintenant 48h sans succès, je me permet donc de vous l'exposez ici.
Le but étant de créer une page HTML disposant d'un boutton.
Au moment ou l'utilisateur clic sur ce boutton la position absolu du <div> change.
Voici mon code ( qui marche très bien sous IE6 et Opera8 mais aucunement sous FireFox ) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#calque1{
position:absolute;
left:372px;
top:95px;
width:350px;
height:32px;
z-index:2;
background-color:#CCFFFF;
border-color:#33CCCC;
border-width:thin;
border-style:solid;
}
</style>
<script language="javascript">
function test(){
document.getElementById("calque1").style.left=500;
}
</script>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="calque1">Test Calque</div>
<form method="get" action="calque.htm">
<input type="button" name="boutton01" id="boutton" onClick="test()">
</form>
</body>
</html>
Merci d'avance pour vos réponses et @+++
étant nouveau dans le monde du Javascript j'écrit des petits bout de code par ci par là pour tester les differentes possibilite offerte par JS.
Je buche sur mon premier problème depuis maintenant 48h sans succès, je me permet donc de vous l'exposez ici.
Le but étant de créer une page HTML disposant d'un boutton.
Au moment ou l'utilisateur clic sur ce boutton la position absolu du <div> change.
Voici mon code ( qui marche très bien sous IE6 et Opera8 mais aucunement sous FireFox ) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#calque1{
position:absolute;
left:372px;
top:95px;
width:350px;
height:32px;
z-index:2;
background-color:#CCFFFF;
border-color:#33CCCC;
border-width:thin;
border-style:solid;
}
</style>
<script language="javascript">
function test(){
document.getElementById("calque1").style.left=500;
}
</script>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="calque1">Test Calque</div>
<form method="get" action="calque.htm">
<input type="button" name="boutton01" id="boutton" onClick="test()">
</form>
</body>
</html>
Merci d'avance pour vos réponses et @+++
)