Affichage différent suivant les navigateurs

Bonjour à tous,

Je suis toute nouvelle dans cette communauté, et j'espère que vous pourrez m'apprendre plein de choses.
On peut commencer maintenant si vous le voulez bien.

Alors, voilà. Je prépare la v4 d'un site mais je me suis aperçue récemment que le rendu des diaporamas ne sont pas les mêmes suivant le navigateur utilisé (j'ai testé Mozilla - sous lequel je travaille - Explorer, Chrome et Opéra).
Sachant que 95 à 98 % des pages de mon site sont des diaporamas.

Voici le code (html, vraiment de base) des diaporamas :

<div id="gallery">
 <em id="thumbs">
		<a >
          <img src="hiver3.jpg" title="" alt=""></a>
        <a >
          <img src="hiver2.jpg" title="" alt=""></a>
        <a >
          <img src="hiver1.jpg" title="" alt=""></a>
		<a >
</em>
</div>

Le CSS associé :

#gallery {
    position: absolute ; 
    width: 109px;	}
	
#thumbs {
    width: 180px;
    float: none ;
	border : 3px } 

#thumbs-2cols {
   width: 180px; 
   float: left ; }

#thumbs a { 
    display: block;
    float: right;
    margin: 0 0 5px 5px;
    width: 50px;
    height: 50px;
    border: 0px solid #000; 	
}
#thumbs a img { /* 	 taille des aperçus		*/
    width: 50px;
    height: 50px;
    border: 0;
}

#thumbs a:hover img {
    position: absolute;
    width: auto; 	/* 	Même avec la largeur et la hauteur automatiques, mes images dépassent de l'écran. J'ai dû les redimensionner pour un bon résultat.	*/
    height: auto;
    left: 190px;	
    top: 0;	
	float : none;
    border: 0 px solid #333; /* 	aucune bordure n'apparait sur aucune image : que je le mette ou le retire : même résultat. 
								Pis c'est quoi ce code couleur ??    	*/
}

L'aperçu souhaité est obtenu sur Mozilla et Opéra, à savoir quand je pointe un aperçu, dans la colonne de gauche, l'image s'affiche en grand dans la partie droite.


Or, j'ai dû détourer des images quand j'ai mis une couleur de fond sur le site. Et ces nouveaux formats, PNG, ont semé la panique...

- Sur Internet explorer, les png s'affichent sur fond blanc alors qu'ils sont évidemment sur fond transparent. Et lorsqu'un diaporama contient au moins un PNG, plus aucun lien ne fonctionne vers la partie droite de l'écran, et du coup, aucun affichage en grand.

- Sur Google Chrome, les PNG s'affichent bien sur fond transparent, par contre, comme pour Explorer, plus aucun diaporama ne fonctionne.


Alors, du coup, je me pose pas mal de questions :
- qu'est-ce qui fait que les navigateurs n'interprètent pas de la même façon ?
- y a-t-il une phrase magique à placer pour qu'ils interprètent comme je le souhaite ?
- que dois-je faire pour rendre mes diaporamas compatibles ?
- Et combien de navigateurs existent ?? Car en parcourant le forum pour voir si mon problème a déjà été soulevé, je me suis aperçu qu'il en existe encore pas mal...

Si j'osais une dernière question... Quels sont les navigateurs les plus utilisés ?


Merci beaucoup à celles et ceux qui pourront m'apporter leurs lumières.
Modifié par leonardus (23 Oct 2012 - 12:36)

Bonjour

Alors déjà la balise <em> n'est pas utilisé comme il faut ici :

leonardus a écrit :

<div id="gallery">
 <em id="thumbs">
		<a >
          <img src="hiver3.jpg" title="" alt=""></a>
        <a >
          <img src="hiver2.jpg" title="" alt=""></a>
        <a >
          <img src="hiver1.jpg" title="" alt=""></a>
		<a >
</em>
</div>

Le <em> sert à mettre en évidence un texte, les navigateur l’interprète sous forme de texte italique. Donc remplace ton <em> par un span ou un div.

Déjà test avec en remplaçant ton code pour voir si le soucis provient de ça !

Je viens de modifier la balise <em> en <div> et ça n'a rien changé.

salut
l'une des raisons des bug d'affichage c'est les balises non fermés
essaye en fermant les balises img, et aussi il y a une balise a à la fin qui apparemment ne sert à rien et qui n'est pas fermée

<div id="thumbs">
  <a > 
     <img src="hiver3.jpg" title="" alt=""/></a>
  <a > 
     <img src="hiver2.jpg" title="" alt=""/></a>
  <a > 
      <img src="hiver1.jpg" title="" alt=""/></a>
  <a > <!-- ici une balise ouverte sans être fermée -->
</div>

En effet, pour la balise a, j'ai copié une partie du code seulement. C'est uniquement lié à ça. Dans le vrai fichier, les balises a sont fermées (je vérifie systématiquement).


Quand tu dis fermer les balises img, c'est les terminer par le slash ?
Je vais tenter...
Ca ne fonctionne pas différemment.


Le plus curieux, c'est que Mozilla affiche sans problème les diaporamas, qu'ils ne contiennent que des JPG ou que des PNG, alors que Chrome refuse l'affichage, qu'il n'y aie que des JPG ou quelques PNG dans le diapo.


S'il faut que je change de code pour les diaporamas, j'y viendrais...

eyos a écrit :
l'une des raisons des bug d'affichage c'est les balises non fermés
essaye en fermant les balises img, et aussi il y a une balise a à la fin qui apparemment ne sert à rien et qui n'est pas fermée

Exact, la balise <em> m'a tellement sauté au yeux que je n'ai pas vu les autres couac ^^

leonardus a écrit :
Quand tu dis fermer les balises img, c'est les terminer par le slash ?

Oui, la balise img se construit comme ceci :

<img src="" alt="" />

leonardus a écrit :
Le plus curieux, c'est que Mozilla affiche sans problème les diaporamas, qu'ils ne contiennent que des JPG ou que des PNG, alors que Chrome refuse l'affichage, qu'il n'y aie que des JPG ou quelques PNG dans le diapo.

Le problème ne vient p-e pas du html dans ce cas.. Tu utilise aussi du JS ?

Et tes balises <a> n'ont pas de href ?

tu peux mettre l'adresse du site? ça nous permettra d'y voir plus claire

Bien sûr que je peux mettre l'adresse du site, ce sera en effet plus clair pour tout le monde. Ceci dit, je prépare la version 4
www.art-trompe-loeil.com


Le a n'a pas de référence, c'est-à-dire qu'il mène vers la page active. Quand tu mets une href="", le navigateur recharge la page en cours. C'est la galerie qui divise la page en deux, et permet l'affichage de l'image dans la page courante.


Je ne pense pas que ça dépende du code : tout est en html : aucun javascript. Je voulais justement quelque chose de simple pour que ça soit accessible par tous.
Je n'ai jamais eu aucun problème sur Mozilla. A mon avis, c'est une adaptation qu'il manque à certains navigateurs. Jusque récemment, Google chrome lisait les diaporamas uniquement en JPG, aujourd'hui, il n'en lit plus aucun.
Et internet explorer qui réagit différemment fonction qu'il y ait que des JPG ou des JGP et quelques PNG, c'est curieux tout de même...


En tous cas, merci beaucoup de consacrer un peu de temps à mon problème.
Modifié par leonardus (24 Oct 2012 - 13:05)

Melusine85 a écrit :
Oui, la balise img se construit comme ceci :

<img src="" alt="" />

Ce n'est valable qu'en XHTML.

En HTML, ce n'est pas nécessaire !

Sinon, pour ton problème : tu n'as pas de doctype. Il y a 99% de chances que tous les problèmes avec IE viennent de là.

Personnellement, je recommande le doctype HTML 4.01 ou HTML 5 (vu que tu ne sembles pas avoir besoin d'XML dans tes pages).
Modifié par Laurie-Anne (24 Oct 2012 - 13:19)

Ouais !! Le DOCTYPE !
Je savais qu'il me manquait une phrase magique.
Je fonce voir ce que c'est, je fais quelques essais et je reviens vous dire !

Que choisir entre strict, transitional, ou frameset ?
Quelles sont les différences ?

Frameset, c'est pour utiliser des frame et rester valide ; tu n'en as pas besoin.

Transitionnal, c'est pour pouvoir utiliser des attributs et éléments dépréciés et rester valide ; de ce que j'ai vu tu n'utilises pas ce genre d'éléments.

Tu peux donc t'orienter vers le strict.

Le problème est réglé avec Google chrome ! Bonne nouvelle !
Et ça fait plaisir ! Merci beaucoup Laurie-Anne !

Par contre, que je prenne "strict" ou un autre type, ça ne change rien pour IE. J'ai essayé avec le doctype pour HTML 4.01, je n'ai pas trouvé le code pour le HTML5.

Et comme je ne sais pas du tout comment ça fonctionne, je ne vais pas me lancer dans des expériences !
Modifié par leonardus (24 Oct 2012 - 14:22)

Merci !
J'opte donc pour le DOCTYPE strict.

Ca devait régler le problème sous IE et c'est bizarrement là que le problème persiste.
Le HTML 5 n'est pas la solution non plus, je viens d'essayer.



EDIT :

Je reviens sur ce que j'ai dit, les images ne s'affichent pas sous IE, tout court, que les diaporamas contiennent ou non des PNG.
Par ailleurs, l'affichage des PNG se fait sur fond blanc sous IE alors qu'il devrait être transparent.
Modifié par leonardus (24 Oct 2012 - 14:45)

Qu'est ce que tu as essayer d'autres?

Ce que j'ai essayé d'autre ?
Ben...

J'ai repris tous mes codes pour vérifier que les balises y soient toutes, dans le bon sens, toutes ouvertes pour être fermées.
J'ai rajouté quelques balises <meta> dans le head pour une meilleure visibilité du site sur la toile.

Quand aux PNG : IE merdoie généreusement.
Je suis surprise que le DOCTYPE que j'ai ajouté hier (HTML 5) ne règle le problème que pour Chrome, et pas pour IE.

Bonjour,

Si c'est pour la transparence des PNG, le doctype ne réglera pas le problème.

Internet Explorer ne sait pas gérer la transparence des PNG, mais les recherches que j'ai faites ne m'ont pas permis de savoir jusqu'à quelle version.

http://support.microsoft.com/kb/294714/fr

Au fait, quelle version d'IE as-tu ?
Modifié par thierry (25 Oct 2012 - 11:56)

Pour IE, j'ai la version 6.0.

Y a la transparence des PNG et l'affichage des diaporamas qui ne vont pas sur IE mais je n'ai aucune idée de comment régler le problème.

Aucune idée pou l'instant!