Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP IE c'est glop - Mozilla c'est moins glop

IE c'est glop - Mozilla c'est moins glop

5 réponses
Avatar
Etienne SOBOLE
Salut.

Je vous propose le petit script suivant:
<html>
<head><title>Extranet WebShaker</title>
<style type='text/css'>
#planning {overflow:auto; overflow-y:scroll; width:423px; height:200px;}
#taskbord {position:absolute; top:20px; border:2px solid #000000;}
</style>
</head>
<body class='mrd' id='mrd'>
<div id='planning'>
<div id='tasklist'>
<div id='taskbord'>bla2 bla2</div>
</div>
<div id='background' style='width:407px; height:1160px;'>
</div>
</div>
</body>
</html>

Si vous le regarder sous IE et sous moz, vous verrez (déjà) vite la
différence lrosque vous bougez l'ascenseur...
Mais la où ca se complique, c'est lorsque j'ajoutte

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
au debut de la page WEB afin de rendre la gestion des borders identique sous
IE et moz.

Dans ce cas... pas de probleme, tout devient identique entre IE et moz, mais
bon. Le comportement est celui le moz, c'est a dire que le scroll ne déplace
pas le div contenu !!!

Donc. ma question n'est pas de savoir qui respecte le standard, bla bla bla.

c'est plutot de savoir comment faire pour que le scroll fonctionne sous IE
et sous moz avec l'entète DOCTYPE donné plus haut.

Voila. c'est une question à 100 balles.
Etienne
Signaler un problème avec ce contenu

5 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Etienne SOBOLE
ok.
l'exemple marche (enfin sous mozilla)
le tuc c'est que je suis obligé de rester en absolu.
j'ai simplifier l'exemple au maximum... voir trop.

en voila donc un autre qui ne donnera pas l'effet voulu meme sous moz

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head><title>Extranet WebShaker</title>
<style type='text/css'>
#planning {overflow:auto; overflow-y:scroll; width:423px; height:200px;}
#task1 {position:relative; top:30px; left:30px; width:100px; border:2px
solid #ff0000;}
#task2 {position:relative; top:30px; left:60px; width:100px; border:2px
solid #0000ff;}
</style>
</head>
<body class='mrd' id='mrd'>
<div id='planning'>
<div id='tasklist'>
<div id='task1'>bla1 bla1</div>
<div id='task2'>bla2 bla2</div>
</div>
<div id='background' style='width:407px; height:1160px;'>
</div>
</div>
</body>
</html>

voila. car les 'task' ne sont pas placée correctement...
elles sont relatives les unes par rapports aux autres....

Etienne
Avatar
Etienne SOBOLE a ecrit :

ok.
l'exemple marche (enfin sous mozilla)
le tuc c'est que je suis obligé de rester en absolu.
j'ai simplifier l'exemple au maximum... voir trop.

en voila donc un autre qui ne donnera pas l'effet voulu meme sous moz



Ouh ! La ! ça va trop vite ça !

J'en suis encore au 1er !

Regarde comme c'est amusant avec :

#planning {overflow:auto; overflow-y:scroll;
width:423px; height:200px;margin-top:80px;}

IE ou Moz c'est aussi marrant
et on comprend ainsi mieux ce qui merdoie

Sinon, perso avec :
#tasklist { position:relative; border:1px solid red;}

Sur IE comme sur Moz même combat, ce semble OK
(avec ou sans doctype)


allez j'embarque le nouveau code et on s'rappelle.


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Olivier Miakinen
Le 27/05/2004 20:13, Etienne SOBOLE a écrit :

> #tasklist {position: relative;}



[...] je pensais avoir testé toutes les
combinaisons, et j'avais pas vu celle la !!!
byzarre.



D'après la doc, si tu ne fixes par de positionnement sur un conteneur de
#taskbord, alors il se positionne par rapport à <body> (ou peut-être
<html>). Pas étonnant alors qu'il se fiche royalement de ton ascenseur.

http://www.w3.org/TR/REC-CSS2/visuren.html#q29
Avatar
Olivier Miakinen a ecrit :

Le 27/05/2004 20:13, Etienne SOBOLE a écrit :

>> > #tasklist {position: relative;}
>
> [...] je pensais avoir testé toutes les
> combinaisons, et j'avais pas vu celle la !!!
> byzarre.

D'après la doc, si tu ne fixes par de positionnement sur un conteneur de
#taskbord, alors il se positionne par rapport à <body> (ou peut-être
<html>). Pas étonnant alors qu'il se fiche royalement de ton ascenseur.



Vi, Vi, on sait (normalement) tous ça, mais ...
avec son nouveau code qu'est-ce qui s'passe ?

Voilà comment j'ai aidé à le detruire encore + :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head><title>Extranet WebShaker</title>
<style type='text/css'>
#planning {position:absolute;top:9px;overflow:auto; overflow-y:scroll;
width:423px; height:200px;border:1px solid black;}
#task1 {position:relative; top:30px; left:50px; width:100px;
border:2px solid #f00;
height: 60px;
}
#task2 {position:relative; top:40px; left:90px; width:100px;
border:2px solid #00f;
height:20px;
}
h6 { border:none;height:1px;background:#555;margin:0px;margin-top: 9px;
font-size:8px;font-weight:normal;padding-left:10px;font-family:arial, monaco;
_line-height:1px; /* pour ce c.. d'IE */
}
#repere {position:abolute;top:0px;left:0px;width:500px;height:220px;background:#ffe;}
</style>
</head>
<body class='mrd' id='mrd'>
<div id='repere'>
<h6>1 010</h6><h6>2 020</h6><h6>3 030</h6><h6>1 040</h6>
<h6>2 050</h6><h6>3 060</h6><h6>4 070</h6><h6>5 080</h6>
<h6>6 090</h6><h6>1 100</h6><h6>2 110</h6><h6>1 120</h6>
<h6>2 130</h6><h6>3 140</h6><h6>4 150</h6><h6>5 160</h6>
<h6>_ 170</h6><h6>_ 180</h6><h6>_ 190</h6><h6>_ 200</h6>
</div>
<div id='planning'>
<div id='tasklist'>
<div id='task1'>bla1 bla1</div>
<div id='task2'>bla2 bla2</div>
</div>
<div id='background' style='width:407px; height:1160px;'>
</div>
</div>
</body>
</html>

J'ai mis un *reperage* que j'espère à 10 px d'intervalle
et donc où passent le top:40px; du task2

(on peut aussi voir une autre horreur en mettant les blabla dans un P)


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Etienne SOBOLE
"@SM" a écrit dans le message de news:


Voilà comment j'ai aidé à le detruire encore + :



ouaip.
c'est vrai que c'est top. C'est en tout cas mieux que ce a quoi j'etais
arrivé !!!
Le probleme, c'est que tu utilises "relative" pour les tasks.
et dans ce cas, impossible de les faire se chevaucher.

en mettant
#task1 {position:relative; top:30px; left:50px; width:100px; border:2px
solid #f00; height: 60px; }
#task2 {position:relative; top:40px; left:90px; width:100px; border:2px
solid #00f; height:20px; }

le but est d'avoir un rectangle qui va des coordonnées (30, 50) à (130, 110)
et un autre de (40, 90) à (140, 110)

il devrait donc se superposer...
ce qui n'est pas le cas !

Etienne