Bonjour à vous,
Mon site, fait avec Kompozer et Notepad ++, n'est toujours pas en ligne. J'attends d'avoir fait suffisamment de pages pour cela. Mais ça ne saurait tarder.
J'ai donc testé les pages faites avec Firefox, IE 8, Opéra, Google Chrome et Safari. Et les résultats sont assez surprenants !
1/ Un paragraphe type <a class=''xxx''>, commençant par une bordure horizontale et se terminant de même sera parfaitement reproduit sur Firefox et .. IE8 (ho, miracle !), mais apparaît avec le seul trait supérieur avec Opéra, Safari et Google Chrome.
2/ Un paragraphe type <a class=''zzz''>, avec bordure de type encart, sera parfaitement reproduit dans Firefox, mais imparfaitement dans tous les autres, où il apparaîtra avec un cadre (ayant deux bords très légèrement plus foncés, c'est vrai). La plus grande déformation est pour IE8.
3/ Favicon : tout allait bien jusqu'à il y a quelques semaines, sur Firefox. Les favicons s'affichaient fièrement.
La ligne dans <head> étant :
<link rel="shortcut icon" href="../../img/favicons/favicon_01.ico" type="image/x-icon">.
Puis du jour au lendemain, plus de Favicon sur Firefox ! Disparus ! Comme je n'avais pas testé avec les autres, je viens de le faire : le favicon apparaît sur Opéra, mais pas sur les quatre autres navigateurs.
4/ Illustration à partir d'une vignette, à afficher dans un onglet d'une taille donnée (''fenêtre pop-up'').
La ligne de commande est :
<a href="../../../img/illustrations_html/nom de l'illustration.html" target="wclose" onclick="window.open('nom de l'illustration.html','wclose','width=500px,height=500px,toolbar=no,status=no')"><img title="nom de l'illustration" style="border: 2px solid ; width: 110px; height: 190px;" alt="nom de l'illustration" src="../../../img/illustrations_vignettes/nom de l'illustration_vignette.png" align="top"></a>
La taille de la fenêtre « pop-up » est correcte pour Firefox, Opéra, Google Chrome et Safari. Mais dans IE8, l'image s'ouvre dans une fenêtre de grand format.
Tout ceci est-il corrigeable ?
Amicalement,
Zibou.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/17.0 Firefox/17.0
[Résolu] Aspects différents en fonction du navigateur
Modérateur : chinon37
[Résolu] Aspects différents en fonction du navigateur
Dernière modification par Zibou le 30 janv. 2013, 21:39, modifié 1 fois.
Re: Aspects différents en fonction du navigateur
Bonjour
Et bienvenue dans le monde merveilleux des vrais navigateurs web, avec chacun leurs particularités.
Pour les deux premières questions, il serait sans doute nécessaire d'indiquer le code CSS affecté à chacune des "classes"
Pour la question 3, je pense que la syntaxe est plutôt
<link rel="icon" href="/favicon.ico"> avec le fichier favicon à la racine du site. À confirmer.
Pour la question 4, il faut rester attentif au fait que la plupart des navigateurs bloquent les fenêtre popup. Et avec raison.
Sans donner de réponse à la question telle qu'elle est posée, j'aurais tendance à conseiller d'autres solutions.
Il y a des choses assez intéressantes à voir du côté de jQuery. Et, en plus,
- ce petit bijou tend à niveler toutes les différences entre les navigateurs: il prend en charge le traitement différencié
- il permet de séparer le code HTML du code Javascript. Ce qui rend assez heureux, puisque l'on peut éviter des loooooongues lignes de commande plutôt illisibles comme celle illustrée dans la question 4.
Malheureusement, l'apprentissage n'en est pas réductible à trois lignes d'explications. Pour une première approche, ceci n'est pas mal fait du tout:
http://www.siteduzero.com/tutoriel-3-16 ... -plus.html
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:17.0) Gecko/17.0 Firefox/17.0
Et bienvenue dans le monde merveilleux des vrais navigateurs web, avec chacun leurs particularités.
Pour les deux premières questions, il serait sans doute nécessaire d'indiquer le code CSS affecté à chacune des "classes"
Pour la question 3, je pense que la syntaxe est plutôt
<link rel="icon" href="/favicon.ico"> avec le fichier favicon à la racine du site. À confirmer.
Pour la question 4, il faut rester attentif au fait que la plupart des navigateurs bloquent les fenêtre popup. Et avec raison.
Sans donner de réponse à la question telle qu'elle est posée, j'aurais tendance à conseiller d'autres solutions.
Il y a des choses assez intéressantes à voir du côté de jQuery. Et, en plus,
- ce petit bijou tend à niveler toutes les différences entre les navigateurs: il prend en charge le traitement différencié
- il permet de séparer le code HTML du code Javascript. Ce qui rend assez heureux, puisque l'on peut éviter des loooooongues lignes de commande plutôt illisibles comme celle illustrée dans la question 4.
Malheureusement, l'apprentissage n'en est pas réductible à trois lignes d'explications. Pour une première approche, ceci n'est pas mal fait du tout:
http://www.siteduzero.com/tutoriel-3-16 ... -plus.html
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:17.0) Gecko/17.0 Firefox/17.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Re: Aspects différents en fonction du navigateur
Bonjour,
Pour le problème 1/ (disparition du trait inférieur sur certains navigateurs), le code CSS (fait avec Cascade) est :
.titre {
border-style: solid none;
border-color: black;
border-width: 1px 0.5px 0.5px;
margin: 0.1em 0.1em 0.3em;
background: #f3f3f3 none repeat scroll 0% 50%;
text-decoration: none;
text-align: center;
font-size: 1em;
font-family: sans-serif;
line-height: 1.4em;
height: 48px;
width: 207px;
padding-top: 3px;
display: block;
font-weight: normal;
color: black;
font-style: normal;
text-transform: none;
padding-bottom: 0px;
}
Pour le problème 2/, on a l'impression que sur IE8, le texte sous le style "<a class="bouton_x"> mesure une ligne de plus, en hauteur, lorsqu'il est survolé. Mais bon, le problème n'est visible que sous IE ....
Problème 4/ : idem (uniquement sous IE).Les grognons n'auront qu'à télécharger Firefox ... .
Problème 3/ (favicons). Là, je sèche ! Chaque fois que j'ouvre un site avec favicon, je fais apparaitre le code source pour "copier" (oui, je sais, c'est pas bien ...). J'ai aussi consulté tous les tutoriels ou sites traitant de ceci. Il y a deux types de lignes de code, une "généraliste", une autre pour IE. Je les reproduit : pas mieux. Mon favicon n'apparait que sur Opéra (quelle que soit, d'ailleurs, la ligne de code, comme si Opéra n'en tenait pas compte et allait chercher seul l'image nommée "favicon"). Là aussi, relativisons. Un favicon n'est pas indispensable. Et lorsque le site sera en ligne, donc avec une adresse "href" différente, je reverrais le problème. Ce qui me contrarie, ce n'est pas que les favicons n'apparaissent pas, c'est que ces favicons apparaissaient sans problème sur FF, et qu'ils ont disparus du jour au lendemain, sans que je comprenne pourquoi. Je n'aime pas ne pas comprendre.
Pour "JQuery", je me suis informé, je suis allé sur "http://www.siteduzero.com/tutoriel-3-16 ... -plus.html". Euh ! Mon niveau de compétence actuel m'oblige à un peu de modestie ! Si j'ai bien bossé et presque digéré Html4 et CSS, là, il faut se remettre en cause ! Javascript et moi-même ne sommes pas du tout intimes, et ce semble pourtant être le préalable à l'étude de JQuery.
Donc, la mise en pratique ne sera pas pour l’immédiat.
Amicalement,
Zibou.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Pour le problème 1/ (disparition du trait inférieur sur certains navigateurs), le code CSS (fait avec Cascade) est :
.titre {
border-style: solid none;
border-color: black;
border-width: 1px 0.5px 0.5px;
margin: 0.1em 0.1em 0.3em;
background: #f3f3f3 none repeat scroll 0% 50%;
text-decoration: none;
text-align: center;
font-size: 1em;
font-family: sans-serif;
line-height: 1.4em;
height: 48px;
width: 207px;
padding-top: 3px;
display: block;
font-weight: normal;
color: black;
font-style: normal;
text-transform: none;
padding-bottom: 0px;
}
Pour le problème 2/, on a l'impression que sur IE8, le texte sous le style "<a class="bouton_x"> mesure une ligne de plus, en hauteur, lorsqu'il est survolé. Mais bon, le problème n'est visible que sous IE ....
Problème 4/ : idem (uniquement sous IE).Les grognons n'auront qu'à télécharger Firefox ... .
Problème 3/ (favicons). Là, je sèche ! Chaque fois que j'ouvre un site avec favicon, je fais apparaitre le code source pour "copier" (oui, je sais, c'est pas bien ...). J'ai aussi consulté tous les tutoriels ou sites traitant de ceci. Il y a deux types de lignes de code, une "généraliste", une autre pour IE. Je les reproduit : pas mieux. Mon favicon n'apparait que sur Opéra (quelle que soit, d'ailleurs, la ligne de code, comme si Opéra n'en tenait pas compte et allait chercher seul l'image nommée "favicon"). Là aussi, relativisons. Un favicon n'est pas indispensable. Et lorsque le site sera en ligne, donc avec une adresse "href" différente, je reverrais le problème. Ce qui me contrarie, ce n'est pas que les favicons n'apparaissent pas, c'est que ces favicons apparaissaient sans problème sur FF, et qu'ils ont disparus du jour au lendemain, sans que je comprenne pourquoi. Je n'aime pas ne pas comprendre.
Pour "JQuery", je me suis informé, je suis allé sur "http://www.siteduzero.com/tutoriel-3-16 ... -plus.html". Euh ! Mon niveau de compétence actuel m'oblige à un peu de modestie ! Si j'ai bien bossé et presque digéré Html4 et CSS, là, il faut se remettre en cause ! Javascript et moi-même ne sommes pas du tout intimes, et ce semble pourtant être le préalable à l'étude de JQuery.
Donc, la mise en pratique ne sera pas pour l’immédiat.
Amicalement,
Zibou.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Re: Aspects différents en fonction du navigateur
Il est tout de même difficile d'aider sans voir la page complète 
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Aspects différents en fonction du navigateur
Bonjour,
J'ai réglé presque tous les problèmes cités, en modifiant la page.
Plus de traits, mais un fond coloré, qui est accepté par les 5 navigateurs cités.
Les cadres "subtils", type 'encart', ne sont reconnus, apparemment, que par Firefox. Donc, plus de subtilité !
Reste les favicons. J'ai bien rédigé les codes comme suit, les deux favicons (png & ico) étant à la racine du site :
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
La rédaction <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><![endif]--> ne s'imposant manifestement pas (vu la lecture des codes sources de nombreux sites ayant des favicons actifs).
Ça marche très bien avec Opéra, Google Chrome, Safari, et même IE (8) ! Mais pas avec Firefox. Étant militant firefoxien, ça me contrarie beaucoup ... (alors que ça fonctionne avec cette daube de IE).
Enfin, une question : existe-t-il une astuce, type "<!--[if IE]>", à mettre, non dans le code source de la page, mais dans le css ?
Zibou
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
J'ai réglé presque tous les problèmes cités, en modifiant la page.
Plus de traits, mais un fond coloré, qui est accepté par les 5 navigateurs cités.
Les cadres "subtils", type 'encart', ne sont reconnus, apparemment, que par Firefox. Donc, plus de subtilité !
Reste les favicons. J'ai bien rédigé les codes comme suit, les deux favicons (png & ico) étant à la racine du site :
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
La rédaction <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><![endif]--> ne s'imposant manifestement pas (vu la lecture des codes sources de nombreux sites ayant des favicons actifs).
Ça marche très bien avec Opéra, Google Chrome, Safari, et même IE (8) ! Mais pas avec Firefox. Étant militant firefoxien, ça me contrarie beaucoup ... (alors que ça fonctionne avec cette daube de IE).
Enfin, une question : existe-t-il une astuce, type "<!--[if IE]>", à mettre, non dans le code source de la page, mais dans le css ?
Zibou
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Re: Aspects différents en fonction du navigateur
As tu déjà essayer avec simplement href="favicon.ico" au lieu de href="/favicon.ico" ?
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Aspects différents en fonction du navigateur
Bonjour,
Je vais avoir l'air bête, mais je le dis tout de même.
Je viens d'essayer mon site sur d'autres ordinateurs que celui avec lequel je travaille habituellement. Et ..., et les favicons apparaissent sans problème sur Firefox (mais toujours pas sur le mien !).
Donc, tout va bien.
Mais ne me demandez pas pourquoi !
Zibou.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Je vais avoir l'air bête, mais je le dis tout de même.
Je viens d'essayer mon site sur d'autres ordinateurs que celui avec lequel je travaille habituellement. Et ..., et les favicons apparaissent sans problème sur Firefox (mais toujours pas sur le mien !).
Donc, tout va bien.
Mais ne me demandez pas pourquoi !
Zibou.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Re: Aspects différents en fonction du navigateur
Mmmhhh... Vider le cache sur le PC récalcitrant?
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:17.0) Gecko/20100101 Firefox/17.0
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:17.0) Gecko/20100101 Firefox/17.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Re: Aspects différents en fonction du navigateur
Bonsoir,
Normalement, je fais ça tous les soirs avec CCleaner.
La case "cache" est cochée dans "Firefox Mozilla", dans l'onglet "Applications".
Bon, ce serait intellectuellement satisfaisant de savoir pourquoi ceci se produit, mais puisque les favicons apparaissent sur les autres ordinateurs, c'est tout de même l'essentiel.
Merci à vous tous.
Zibou.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Normalement, je fais ça tous les soirs avec CCleaner.
La case "cache" est cochée dans "Firefox Mozilla", dans l'onglet "Applications".
Bon, ce serait intellectuellement satisfaisant de savoir pourquoi ceci se produit, mais puisque les favicons apparaissent sur les autres ordinateurs, c'est tout de même l'essentiel.
Merci à vous tous.
Zibou.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:17.0) Gecko/20100101 Firefox/17.0
Re: Aspects différents en fonction du navigateur
Pour vider le cache, pas besoin de ccleaner, un simple Ctrl+Maj+Suppr suffit (sous windows)
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 11 invités