[HTML] Divergences FireFox - Internet Explorer
Jean Le Brun
Probl�me avec un Sommaire programm� pour mon site :
http://www.cyranorion.fr/eta/index.html
Ce sommaire contient une vingtaine de mots rang�s sur 4 lignes, un
clic sur chaque mot affiche la page correspondante du site.
Tout fonctionne correctement sous le visualisateur int�gr� de
WebExpert 6, sous IE6 et sous FireFox 3.0.15 mais, au niveau
visualisation appara�t un d�faut d�sagr�able sous FireFox : une ligne
vite appara�t en haut et en bas des 4 lignes constituant le sommaire.
Voir l'image :
http://www.cijoint.fr/cjlink.php?file=cj200911/cijNWuPGzi.jpg
(en constituant l'image ci-dessus, j'ai remarqu� que la m�me zone
capt�e avec SnagIt8 sous IE et FF ne font pas la m�me largeur en
pixels, ce qui est pour moi incompr�hensible ;o(
Ce sommaire est construit par le code ci-dessous :
<div id="sommaire">
<p style="font-size:100%;">
<a href="pages/visiter_site.html"><b>Comment visiter
ce site</b></a> -
<a href="pages/historique.html"><b>Historique</b></a>
-
<a href="pages/mondran.html"><b>Mondran</b></a> -
<a href="pages/effectifs.html"><b>ETA
retrouv�s</b></a> -
<a href="pages/nouveautes.html"><b>Nouveaut�s</b></a>
-
<a
href="pages/statistiques.html"><b>Statistiques</b></a> -
<a href="pages/solutions.html"><b>Informatique</b></a>
- - - - -
<a href="pages/promo46-50.html"><b>Promo
1946/1950</b></a> -
<a href="pages/promo47-51.html"><b>Promo
1947/1951</b></a> -
<a href="pages/promo48-52.html"><b>Promo
1948/1952</b></a> -
<a href="pages/promo49-53.html"><b>Promo
1949/1953</b></a> -
<a href="pages/promo50-54.html"><b>Promo
1950/1954</b></a> -
<a href="pages/promo51-56.html"><b>Promo
1951/1956</b></a> -
<a href="pages/promo52-57.html"><b>Promo
1952/1957</b></a> -
<a href="pages/promo53-58.html"><b>Promo
1953/1958</b></a> -
<a href="pages/promo54-59.html"><b>Promo
1954/1959</b></a> -
<a href="pages/promo55-60.html"><b>Promo
1955/1960</b></a> -
<a href="pages/promo56-61.html"><b>Promo
1956/1961</b></a> -
<a href="pages/promo57-62.html"><b>Promo
1957/1962</b></a> -
<a href="pages/promo58-63.html"><b>Promo
1958/1963</b></a> -
<a href="pages/promo59-64.html"><b>Promo
1959/1964</b></a> -
<a href="pages/promo60-65.html"><b>Promo
1960/1965</b></a> -
</p>
</div>
Dans le "head" de la page, le positionnement du sommaire (et des
autres zones sur la page) est d�fini par le code :
<style type="text/css">
#sommaire {position:absolute; top:1px;
left:1px; width: 775px; border: 2px solid blue;}
#accueil_1 {position:absolute; top:1px;
left:820px; width: 160px; }
#principal {position:absolute; top:150px;
left:0px; width: 980px; }
</style>
J'ai tent� des dizaines de modifs de ce code sans aucun r�sultat
satisfaisant, la divergence entre IE et FF est toujours l�.
Quelqu'un aurait-il une id�e quant � la cause ... et des conseils pour
rem�dier � ce disfonctionnement ?
Merci de m'avoir lu jusqu'au bout de ce pensum ;o)
jean
B.M.
Dans le div sommaire, soit tu vire la balise <p>, soit tu lui ajoutes
margin: 0 comme style.
Par ailleurs je vois deux grosses anomalies dans ton head:
-1- la d�claration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ne
correspond pas au code utilis� (ou l'inverse). Remplace �a par <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-2- Il y a deux d�clarations de charsets diff�rents, c'est un de trop.
Il faut choisir !
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Anciens �l�ves de l'Ecole Technique A�ronautique (ETA
Toulouse et Ville d'Avray) - Page d'accueil.</title>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-15">
Dans webexpert va voir dans outils/pr�f�rences
g�n�rales/�diteur/encodage sur quel charset tu encodes et ne conserve
que la balise meta correspondante.
--
B. M.
SAM
> Bonjour � toutes et � tous,
>
> Probl�me avec un Sommaire programm� pour mon site :
> http://www.cyranorion.fr/eta/index.html
>
> Ce sommaire contient une vingtaine de mots rang�s sur 4 lignes, un
> clic sur chaque mot affiche la page correspondante du site.
> Tout fonctionne correctement sous le visualisateur int�gr� de
> WebExpert 6, sous IE6 et sous FireFox 3.0.15 mais, au niveau
> visualisation appara�t un d�faut d�sagr�able sous FireFox : une ligne
> vite appara�t en haut et en bas des 4 lignes constituant le sommaire.
> Voir l'image :
> http://www.cijoint.fr/cjlink.php?file=cj200911/cijNWuPGzi.jpg
Bon, probable que c'est le 'P' inclus dans le div 'sommaire' ?
Le marger � 0 ?
ou mettre les liens directement dans le div ?
ceci dit, voici ce qu'affiche le code donn� dans mes navigateurs :
<http://cjoint.com/?lpezgOI6lA>
Pas une tr�s bonne id�e de :
- mettre en position absolute
- de fixer la largeur (sans pouvoir maitriser la taille des caract�res,
normalement fix�e dans chaque navigateur)
Pour les "a", leur donner le style : white-space: pre;
(afin que les liens ne soient pas coup�s sur 2 lignes)
et peut-�tre styler le div 'sommaire' en text-align: center; ?
� mon id�e, la couleur de fond de page est trop sombre.
et le trombinoscope est trop rapide.
Bonne continuation
--
sm
Jean Le Brun
Bonjour BM,
>Dans le div sommaire, soit tu vire la balise <p>, soit tu lui ajoutes
>margin: 0 comme style.
Jai tent� les deux manips. Elles conduisent apparemment au m�me
r�sultat : mon anomalie sous FireFox a disparue !!!!
Un grand merci � toi, ainsi qu'� SAM qui confirme ton diagnostic ;o)
>Par ailleurs je vois deux grosses anomalies dans ton head:
>
>-1- la d�claration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
>Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ne
>correspond pas au code utilis� (ou l'inverse). Remplace �a par <!DOCTYPE
>HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Explication : j'ai compl�tement refondu ce site il y a quelques mois
et en ai profit� pour tenter de migrer de html � xhtml.
Je suis pr�cis�ment en train de faire �valuer mon code par le
validateur du W3C et effectivement j'ai pas mal de choses � corriger.
Si comme c'est le cas pour certains aspects, je continue de buter sur
certains points, je reviendrai au html.
>-2- Il y a deux d�clarations de charsets diff�rents, c'est un de trop.
>Il faut choisir !
> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
> <title>Anciens �l�ves de l'Ecole Technique A�ronautique (ETA
>Toulouse et Ville d'Avray) - Page d'accueil.</title>
> <meta http-equiv="Content-type" content="text/html;
>charset=iso-8859-15">
>Dans webexpert va voir dans outils/pr�f�rences
>g�n�rales/�diteur/encodage sur quel charset tu encodes et ne conserve
>que la balise meta correspondante.
Oui, ��, je m'en suis aper�u cet apr�s-midi et j'ai vir� la
d�claration en trop. J'ai conserv� iso 8859-1 et supprim� le codage
Windows-1252.
Est-ce la bonne m�thode pour �tre lu correctement par les mac ou les
machines linux ?
Merci encore de t'�tre int�ress� de fa�on aussi compl�te � mon cas.
Cordialement,
Jean
Jean Le Brun
<stephanemor...@wanadoo.fr.invalid> �crit:
Bonjour SAM,
>Bon, probable que c'est le 'P' inclus dans le div 'sommaire' ?
>Le marger � 0 ?
>ou mettre les liens directement dans le div ?
J'ai marg� � 0 et le d�faut constat� sous FireFox a disparu. Merci.
>ceci dit, voici ce qu'affiche le code donn� dans mes navigateurs :
><http://cjoint.com/?lpezgOI6lA>
Que les trois affichent des images diff�rentes, cela provient-il de
l'abscence de cette marge � 0 ?
>Pas une tr�s bonne id�e de :
>- mettre en position absolute
>- de fixer la largeur (sans pouvoir maitriser la taille des caract�res,
>normalement fix�e dans chaque navigateur)
Comme j'�tais compl�tement d�butant lorsque j'ai programm� �� ( et je
n'ai gu�re �volu� ;o), j'ai "repomp�" un exemple sur la toile sans
comprendre la signification de ce "absolute".
Par ailleurs comment s'y prendre sans fixer la largeur si je veux
garder de la place pour le trombinoscope ?
>Pour les "a", leur donner le style : white-space: pre;
>(afin que les liens ne soient pas coup�s sur 2 lignes)
>et peut-�tre styler le div 'sommaire' en text-align: center; ?
Comment �crit-on �� ?
C'est vrai que c'est p�nible de constater que les navigateurs
traduisent diff�remment et qu'il y a longtemps que je me creuse la
t�te pour que mes "mots-liens" ne se baladent pas o� ils veulent.
Il y a d'ailleurs pire : sur mes 2 machines, sous le m�me FireFox,
j'ai des dispositions diff�rentes probablement parce que les deux
�crans n'ont pas le m�me r�glage de r�solution !!!
>� mon id�e, la couleur de fond de page est trop sombre.
Oui, un de mes "lecteurs" me l'a signal�. Je l'ai refait ... il est
encore aussi sombre ;o(
Faudra que j'y repense ...
>et le trombinoscope est trop rapide.
Je dois effectivement le ralentir.
>Bonne continuation
J'ai effectivement du pain sur la planche. Merci beaucoup pour ton
attention et tes conseils.
Cordialement,
jean
--
SAM
> Le Sun, 15 Nov 2009 04:44:21 +0100, SAM
> <stephanemor...@wanadoo.fr.invalid> �crit:
>
> Bonjour SAM,
B'soir, 'jour, toussa que j'oublie,
>> ceci dit, voici ce qu'affiche le code donn� dans mes navigateurs :
>> <http://cjoint.com/?lpezgOI6lA>
>
> Que les trois affichent des images diff�rentes, cela provient-il de
> l'abscence de cette marge � 0 ?
Non c'�tait juste pour montrer que tous les navigateurs n'affichent pas
la m�me chose (peu importe la marge, le blanc, oui/non) les liens sont
coup�s, les caract�res n'ont pas la m�me taille, la police n'est pas la
m�me (tout cela +/- d� aux r�glages de l'utilisateur)
>> Pas une tr�s bonne id�e de :
>> - mettre en position absolute
>> - de fixer la largeur (sans pouvoir maitriser la taille des caract�res,
>> normalement fix�e dans chaque navigateur)
>
> Comme j'�tais compl�tement d�butant lorsque j'ai programm� �� ( et je
> n'ai gu�re �volu� ;o), j'ai "repomp�" un exemple sur la toile sans
> comprendre la signification de ce "absolute".
> Par ailleurs comment s'y prendre sans fixer la largeur si je veux
> garder de la place pour le trombinoscope ?
Je voulais dire que de fixer la largeur en employant � l'int�rieur des
trucs (textes) dont on n'est pas ma�tre ne favorise pas un affichage
�gal suivant tous les ordis/utilisateurs/syst�mes/navigateurs.
Pour l'histoire de l'absolute il aurait peut-�tre �t� mieux de faire
#truc { float: left;
width: 568px;
border: 1px solid; padding: 5px; color: blue; }
et mettre le trombinoscore en float: left; aussi.
on place ensuite un �l�ment qui stoppe la flottaison
clear: left;
et ainsi on n'a pas besoin de positionner aussi cet �l�ment
qui se rangera seul sous les 2 premiers.
(l'utilisateur pourra employer une grande taille de police sans que �a
ne merdoie trop)
>
>> Pour les "a", leur donner le style : white-space: pre;
white-space: nowrap;
>> (afin que les liens ne soient pas coup�s sur 2 lignes)
>> et peut-�tre styler le div 'sommaire' en text-align: center; ?
>
> Comment �crit-on �� ?
� la main dans son NotePad+ ;-)
#sommaire { float: left; width: 775px; border: 1px solid blue; }
#sommaire a { text-decoration:none; white-space: nowrap; padding: 0 8px;
line-height: 1.5em}
#sommaire a:hover { color: maroon; background: yellow }
on peut aussi essayer :
#sommaire { float: left; width: 775px; border: 1px solid blue; }
#sommaire a { display: block; float: left; text-decoration:none;
padding: 3px 8px;}
#sommaire a:hover { color: maroon; background: yellow }
non test� avec IE sur le code donn� pr�c�demment.
--
sm
Michael DENIS
> validateur du W3C
Si vous ne les utilisez pas d�j�, Firefox et Html validator
(http://users.skynet.be/mgueury/mozilla/) devrait vous faire gagner un
peu de temps pour ce type de travail.
--
Micha�l DENIS
Jean Le Brun
<news...@DEL2nis.net.invalid> �crit:
Bonjour Micha�l,
>Si vous ne les utilisez pas d�j�, Firefox et Html validator
>(http://users.skynet.be/mgueury/mozilla/) devrait vous faire gagner un
>peu de temps pour ce type de travail.
J'ai essay� et, effectivement, c'est bien plus rapide. Merci beaucoup.
Cordialement,
Jean
Jean Le Brun
<stephanemor...@wanadoo.fr.invalid> �crit:
Bonjour SAM,
Pardon de ne pas avoir r�agi plus t�t, j'�tais absent de chez moi.
>Je voulais dire que de fixer la largeur en employant � l'int�rieur des
>trucs (textes) dont on n'est pas ma�tre ne favorise pas un affichage
>�gal suivant tous les ordis/utilisateurs/syst�mes/navigateurs.
>
>Pour l'histoire de l'absolute il aurait peut-�tre �t� mieux de faire
>#truc { float: left;
> width: 568px;
> border: 1px solid; padding: 5px; color: blue; }
>
>et mettre le trombinoscore en float: left; aussi.
>
>on place ensuite un �l�ment qui stoppe la flottaison
> clear: left;
>et ainsi on n'a pas besoin de positionner aussi cet �l�ment
>qui se rangera seul sous les 2 premiers.
>(l'utilisateur pourra employer une grande taille de police sans que �a
>ne merdoie trop)
Suivant ton conseil, j'ai remplac� par :
<style type="text/css">
#sommaire { float: left; width: 835px; border: 1px solid blue; }
#sommaire a { text-decoration:none; white-space: nowrap; padding: 0px
6px;line-height: 1.5em}
#sommaire {text-align: center;}
#sommaire a:hover { color: maroon; background: yellow }
#accueil_1 {float: left;margin-left:15px;width: 160px; top:1px;}
#principal {clear:left; width: 980px; }
</style>
et �� marche mais voir plus bas.
>>> Pour les "a", leur donner le style : white-space: pre;
>
>white-space: nowrap;
>>> (afin que les liens ne soient pas coup�s sur 2 lignes)
>>> et peut-�tre styler le div 'sommaire' en text-align: center; ?
Voila ce que j'ai �crit pour les "a":
<a style="white-space: nowrap;"
href="pages/visiter_site.html"><b>Comment visiter ce site</b></a> -
etc..
Tout fonctionne au poil ... sauf que je n'ai toujours pas les m�mes
r�sultats sous IE et FF.
Je crois que je vais garder en l'�tat jusqu'� ce que je sois plus
expert en html ;o)
Je te remercie beaucoup de m'avoir "tenu la main".
Cordialement,
jean
Jean Le Brun
- Je vois bien ma page avec la m�me disposition sur l'une de mes deux
machines,
- Sur l'autre, m�me r�sultatr satisfaisant sous IE mais divergence
sous FF.
De toute fa�on c'est beaucoup mieux qu'avant, je garde ;o)
Merci encore.
Cordialement,
jean