Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Couches et navigateurs

3 réponses
Avatar
jojo
bonjour. j'ai une petit souci avec mozilla et safari. une succession de
couches bien ancrées, position absolue, comportement fonctionne sans
problème, centrées à l'intérieur d'un cadre. c'est parfait sous IE et 99%
parfait pour les autres, le 1%, exaspérant, c'est l'une des couches, 1 seule,
incompréhensible, elle est trop large et déborde avec mozilla et safari,
parfaite avec IE. les autres couches sont OK. y a t-il un doc ou un tableau
quelque part qui indique les différences entre navigateurs ?
Les 3 principaux (les autres n'ont qu'à s'adapter). Merci
--
jho

3 réponses

Avatar
Lempel
Tu peux nous donner l'adresse de ton site, que l'on puisse voir ce qui se
passe ?

--
http://lempel.net
B. Lempel
______________________________________


"jojo" a écrit dans le message de news:

| bonjour. j'ai une petit souci avec mozilla et safari. une succession de
| couches bien ancrées, position absolue, comportement fonctionne sans
| problème, centrées à l'intérieur d'un cadre. c'est parfait sous IE et 99%
| parfait pour les autres, le 1%, exaspérant, c'est l'une des couches, 1
seule,
| incompréhensible, elle est trop large et déborde avec mozilla et safari,
| parfaite avec IE. les autres couches sont OK. y a t-il un doc ou un
tableau
| quelque part qui indique les différences entre navigateurs ?
| Les 3 principaux (les autres n'ont qu'à s'adapter). Merci
| --
| jho
Avatar
B. M.
jojo a écrit :
bonjour. j'ai une petit souci avec mozilla et safari. une succession de
couches bien ancrées, position absolue, comportement fonctionne sans
problème, centrées à l'intérieur d'un cadre. c'est parfait sous IE et 99%
parfait pour les autres, le 1%, exaspérant, c'est l'une des couches, 1 seule,
incompréhensible, elle est trop large et déborde avec mozilla et safari,
parfaite avec IE. les autres couches sont OK. y a t-il un doc ou un tableau
quelque part qui indique les différences entre navigateurs ?
Les 3 principaux (les autres n'ont qu'à s'adapter). Merci



C'est un grand classique. Dans le principe des css, inventé par
microsoft, on fait appel à la notion de "boite" qui aurait une marge
intérieure (le padding), un contenu (à l'intérieur du padding), une
bordure (border) et une marge extérieure (le margin). Pour microsoft, la
largeur de la boite c'est celle du contenu + le padding (et ça parait
logique). Curieusement, lorsque le W3C a intégré dans ses normes le
principe des boites, il a décidé que la largeur de la boite était celle
du contenu seul. Mozilla, Safari, Opera et les autres se conformant à
ces normes on a donc un écart pénible dès lors qu'on met du padding (et
je ne vois pas comment on pourrait ne pas en mettre dès lors qu'on a
une bordure).

Comment s'en sortir ?

1ère solution : spécifier avec quelle version du html a été faite la
page. En effet, il existe deux versions du html4 : le html4 transitional
et le html4 strict. Si IE6 reconnait que la page est en html strict, il
se conforme à la définition W3C des boites et se comporte donc comme les
autres navigateurs. Pour spécifier qu'on est en "strict", il faut
ajouter la ligne de code suivante en haut de page (avant la balise
<html>) : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">, mais
attention, à ce moment là, plus question d'utiliser des balises <font>
par exemple qui n'existent pas en html strict.

2ème solution : utiliser un subterfuge dans la feuille de style pour
donner une largeur différente à la boite selon que la page est lue avec
IE ou avec un autre navigateur. par exemple pour une boite qui a un id
"boite", on va rédiger comme ça la feuille de style :
#boite {padding: 25px; width: 550px; _width: 600px}
Mozilla et consors ne vont pas comprendre l'instruction précédée de
l'underscore et mettront donc une largeur de 550px au contenu de la
boite et pour une raison que j'ignore mais qui est bien pratique, IE
(toutes versions) va retenir l'instruction avec underscore (il faut
qu'elle soit placée après l'autre) et donner une largeur de 600px au
contenu + padding, ce qui fait un rendu identique aux autres navigateurs.

Bon, je ne suis pas sûr d'avoir été clair, mais faites quelques essais
et vous comprendrez.

--
B. M.
http://www.america-dreamz.com
Avatar
jojo
Merci beaucoup, je vais copier votre réponse et me pencher un peu plus sur la
question, en attendant, je l'ai résolu avec du bricolage, qui marche à peu
près. pour répondre à Lempel, le site, c'est www.eison.com (note, il est
provisoire, l'image en haut sera changée, c'est une microsoft). mais
j'aimerais réutiliser couches et comportements pour alléger visuellement mes
2 autres sites, dont www.festivaldejazzdeserres.com qui risque d'enfler en
photos et contenu.
merci
jho


"B. M." a écrit :

jojo a écrit :
> bonjour. j'ai une petit souci avec mozilla et safari. une succession de
> couches bien ancrées, position absolue, comportement fonctionne sans
> problème, centrées à l'intérieur d'un cadre. c'est parfait sous IE et 99%
> parfait pour les autres, le 1%, exaspérant, c'est l'une des couches, 1 seule,
> incompréhensible, elle est trop large et déborde avec mozilla et safari,
> parfaite avec IE. les autres couches sont OK. y a t-il un doc ou un tableau
> quelque part qui indique les différences entre navigateurs ?
> Les 3 principaux (les autres n'ont qu'à s'adapter). Merci

C'est un grand classique. Dans le principe des css, inventé par
microsoft, on fait appel à la notion de "boite" qui aurait une marge
intérieure (le padding), un contenu (à l'intérieur du padding), une
bordure (border) et une marge extérieure (le margin). Pour microsoft, la
largeur de la boite c'est celle du contenu + le padding (et ça parait
logique). Curieusement, lorsque le W3C a intégré dans ses normes le
principe des boites, il a décidé que la largeur de la boite était celle
du contenu seul. Mozilla, Safari, Opera et les autres se conformant à
ces normes on a donc un écart pénible dès lors qu'on met du padding (et
je ne vois pas comment on pourrait ne pas en mettre dès lors qu'on a
une bordure).

Comment s'en sortir ?

1ère solution : spécifier avec quelle version du html a été faite la
page. En effet, il existe deux versions du html4 : le html4 transitional
et le html4 strict. Si IE6 reconnait que la page est en html strict, il
se conforme à la définition W3C des boites et se comporte donc comme les
autres navigateurs. Pour spécifier qu'on est en "strict", il faut
ajouter la ligne de code suivante en haut de page (avant la balise
<html>) : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">, mais
attention, à ce moment là, plus question d'utiliser des balises <font>
par exemple qui n'existent pas en html strict.

2ème solution : utiliser un subterfuge dans la feuille de style pour
donner une largeur différente à la boite selon que la page est lue avec
IE ou avec un autre navigateur. par exemple pour une boite qui a un id
"boite", on va rédiger comme ça la feuille de style :
#boite {padding: 25px; width: 550px; _width: 600px}
Mozilla et consors ne vont pas comprendre l'instruction précédée de
l'underscore et mettront donc une largeur de 550px au contenu de la
boite et pour une raison que j'ignore mais qui est bien pratique, IE
(toutes versions) va retenir l'instruction avec underscore (il faut
qu'elle soit placée après l'autre) et donner une largeur de 600px au
contenu + padding, ce qui fait un rendu identique aux autres navigateurs.

Bon, je ne suis pas sûr d'avoir été clair, mais faites quelques essais
et vous comprendrez.

--
B. M.
http://www.america-dreamz.com