[HTML] Divergences FireFox - Internet Explorer
Le
Jean Le Brun
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?fi...WuPGzi.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
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?fi...WuPGzi.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
Poser une question
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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht..."> 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.
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 :
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
Bonjour BM,
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)
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.
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
Bonjour SAM,
J'ai margé à 0 et le défaut constaté sous FireFox a disparu. Merci.
Que les trois affichent des images différentes, cela provient-il de
l'abscence de cette marge à 0 ?
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 ?
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 !!!
Oui, un de mes "lecteurs" me l'a signalé. Je l'ai refait ... il est
encore aussi sombre ;o(
Faudra que j'y repense ...
Je dois effectivement le ralentir.
J'ai effectivement du pain sur la planche. Merci beaucoup pour ton
attention et tes conseils.
Cordialement,
jean
--
B'soir, 'jour, toussa que j'oublie,
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)
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)
white-space: nowrap;
à 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