Affichage IE et MF différent

Question

Bonjour,

Je viens de me rendre compte que mes pages web ne s'affichaient pas du tout correctement sous IE, alors que sous Firefox, Opéra, Safari... tout marche correctement! o_O

De plus j'avais au préalable fais un aperçu via les navigateurs avant d'envoyer ces pages sur mon ftp, et tout fonctionnait sous ie :o ! c'est une fois en ligne que c'est le fouillis complet.

Voici les pages en questions: http://peexstudio.fr/fr/accueil.html

Savez-vous pourquoi tout a bougé?

bg62 · Answer

vois déjà ceci :
http://validator.w3.org/...
et grosse erreur  : ne jamais mettre de lien vers un site non terminé, donc bourré d'erreurs '404'
regarde ce que cela donne :
https://www.google.fr/?gws_rd=ssl#hl=fr&source=hp&q=peexstudio.fr&btnG=Recherche+Google&meta=&aq=f&oq=peexstudio.fr&fp=be6da6ef3aaee74a
surtout les premières lignes !!!
après pour en lever toutes ces traces ...
:)

Peexstudio · Answer

Merci pour le tuyau concernant les pages générés sur google...

Par contre en ce qui concerne ton lien vers validator, je ne comprend pas qu'elle est le problème, d'après lui mes problèmes se focalisent sur la fin de mon code xhtml, sur les dernieres balises mais je ne vois pas le problème, elle se fermes correctement pourtant non ?

notobe · Answer

Le

n'est pas fermé. Petites choses puisque du coup j'ai été voir le code source ;) - tbody et th ne sont pas à utiliser lorsqu'on utilise des tableaux pour de la mise en page. Ce sont des balises de tableaux de données - Les images liens de tes menus ne comportent pas de alt, et pour cause, c'est une image de fond. Donc, tes liens sont vides. Ça c'est très très mal ;) Toute image porteuse de sens (et donc pour un menu de navigation, c'est plus que jamais porteur de sens !) doit se trouver 'en dur' dans le code html avec un bon alt pertinent.

Peexstudio · Answer

Hello notobe, j'ai fais se que tu m'a dit avec la balise

Idem avec la mention "alt" que j'avais oublié de mettre sur mes liens images. Cependant rien ne change vis-à-vis de IE. Pourrais-tu vérifier le nouveau code source de cette page: http://peexstudio.fr/fr/accueil.html ? Ais-je bien corrigé mes fautes? Merci

notobe · Answer

Tu as changé le doctype ?!!
La validation ne passe pas car tu fermes toutes les balises alors que le doctype est en html 4.01...

(et tu utilises tjs des tbody et des th...)

Peexstudio · Answer

J'ai re-changer le doctype et remis l'ancien mais rien ne change non plus...

En ce qui concerne les tbody et th c'était uniquement pour faire un petit bloc avec un peux de contenu l'histoire d'habiller un peut tout ça mais bien évidemment, je n'utiliserais plus les tableaux de la sorte à l'avenir, je souhaite avant tout parvenir à solutionner mon problème d'affichage et une fois cela fait, je m'attaquerais au contenu du site, et modifierais comme tu me l'a indiqué les tableaux.

Ne serrais-ce pas à cause du fichier css? j'ai peut être mal fait quelques choses dessus.

notobe · Answer

J'ai été voir ton site avec IE8/IE7, je n'ai pas vu de différences fondamentales entre le rendu avec FF. Mais je n'ai fait que jeter un coup d'oeil rapide.

Qu'est-ce qui te chiffonne exactement ?

[edit] euh... j'ai relancé la validation, il y a encore deux erreurs dont une de taille ! Un alt est fait pour une image, pas pour un lien !
Il faut que tu mettes ton image en dur dans le code, pas en image de fond dans la CSS.
Ou tu la découpes en petits morceaux, ou tu la mappes (en mettant bien des alt ;) ) mais là tes liens sont tjs vides !!

AG's · Answer

Le projet Peexstudio vous offre tout son savoir faire en matière de créations graphiques web et print moyennant une petite contribution de votre part. Les tarifs restent très accessibles, il ne s'agit pas de commercialiser nos services à des fins professionnelles  
 mais dans le seul but d'assurer notre avenir en utilisants ces fonds pour financer nos études. Vous trouverez de plus amples informations dans les pages prévues à cet effet


Voici une petite correction des nombreuses fautes d'ortographe trouvées dans le premier paragraphe.
C'est important l'orthographe, plein de fautes ça fait pas pro du tout...(par contre le design est tres classe, joli travail)


Au pire moi "moyennant une petite contribution de votre part", je peux les corriger dans tout le site...

AG's · Answer

utilisant

Peexstudio · Answer

Merci AG's pour la correction mais se n'est pas nécessaire, j'ai juste recopié un chiffon que j'avais fait sur papier, dans le seul but (et je me répète) d'habiller un peut le site, le contenu (texte) je ne me suis pas attardé dessus pour le moment et j'essaye de régler d'autres problèmes avant.

Notobe, se qui me chiffonne c'est ça: 

[URL="https://imageshack.com/"]ACCUEIL[/URL]
[URL="https://imageshack.com/"]SECTION PORTFOLIO[/URL]

Les deux sous IE, alors que sur FF tout s'affiche correctement. Je vais jeter un coup d'oeil en se qui concerne le problème de taille, pour ce qui est du menu... heum je verrais plus tard ^^"

Sur ton IE tout s'affiche correctement?

notobe · Answer

Alors... je suis perdu là !! :D

Ton site ne s'affiche plus comme au début, ni dans FF, ni dans IE. Et je n'ai jamais vu de menu déroulant comme sur ta capture d'écran...

Pour en revenir à tes images de lien, il ne faut pas que tu changes ça après, car forcément ça va avoir une incidence sur ta mise en page, donc ce que tu auras réglé d'un côté risque d'être à recommencer...

Donc, dans FF, je n'ai plus de terre qui tourne, et le pied de page vient se superposer au texte à peu près au milieu du tableau.

Dans IE8, j'ai bien la terre, mais à moitié masquée par l'image en dégradée, et le pied de page est encore plus haut que dans FF.

Dans un cas comme dans l'autre, ça ne correspond en rien à tes captures d'écran. Et j'ai oublié de préciser une chose : mon écran est bcp bcp plus petit que le tien !! (je suis en 1024*768)

Peexstudio · Answer

[edit] Tu peux relancer la validation, je viens de le faire et tout est niquel à présent. Mais toujours ce problème d'affichage. Es-ce un cas isolé? car sur une autre bécane que la mienne, le site s'affiche correctement sous IE et y a pas le décalage du menu que tu vois sur mes screens. Chez toi sa donne quoi?

Peexstudio · Answer

Sur un autre ordi avec un affichage 1024*768:
https://imageshack.com/

Là, je suis sans voix. Tout se redimensionne par rapport à la taille de la fenêtre donc?

Arf, je suis complètement pommé.

notobe · Answer

Oui, oui, la validation c'est bon. Mais ce n'est pas une fin en soit, même si c'est important ;)

Voilà ce que ça donne sur ma bécane avec IE8 :
http://img109.imageshack.us/img109/9306/peexie.png

Quant à la terre qui n'apparait pas avec FF, ça vient de moi !! (flashblock activé !!)

Peexstudio · Answer

Aaah mais Notobe, agrandi ta fenêtre avec le bouton adéquate en haut à droite, tout devrait retourné dans l'ordre non?

Peexstudio · Answer

J'oubliais Notobe, en ce qui concerne mon problème de décalage du menu, en réalité c'est dût au faite qu'il faut que j'active l'affichage de compatibilité sous IE8 (bouton à l'extrême droite de la saisie de recherche), et en l'activant tout va bien!
Depuis le début sa aurait pus fonctionné mais sa ma permis de nettoyer un peux tout ce code, enfin... y a comme un autre problème vu ton screenshoot, on dirait que les éléments partent en vrilles dès que la fenêtre du navigateur web est réduite ou redimensionné.

notobe · Answer

Je suis déjà plein écran Peex ;)

Tu me demandais si tout se redimensionne par rapport à la fenêtre, oui, et surtout en fonction de la résolution, on n'a pas la même chose.
Ton pied de page tu le déclares en position absolute avec un bottom:-70px.
Mais si mon écran (à moi que j'ai) n'est déjà pas assez haut pour afficher tout le texte, fatalement, le pied de page va recouvrir le texte. Comprends-tu ?

C'est dangereux les positions absolues, car tu sors du flux, et donc pour la résolution.... c'est difficile à maîtriser, dans ce cas de figure en tout cas.

Il faut que je te laisse pour ce soir, c'est pas tout ça, mais demain boulot (et loin du web en plus...)
Bonne nuit !

Peexstudio · Answer

Idem pour moi! (par rapport au boulot)

j'ai au moins réussi a remettre les éléments dans l'ordre (entre guillemets) et j'ai nettoyer mon code html.

Je verrais la suite demain, merci beaucoup Notobe (y)!

Bon courage pour demain.

monkey_monk · Answer

Ca ne serait pas un problème de z-index par hasard ?

Parce qu'avec le nombre de div... et connaissant IE ^^

Peexstudio · Answer

Hello,
Bien à mon avis c'est un problème de position car lorsque tu étire plus ou moins la fenêtre tout les éléments en pieds de page bougent (video, imagecopyright, et copyright).
Seul l'en tête (boutons et barre en repeat-x, et le tableau) ne bouge pas. Il faudrait à la rigueur que j'arrive à ne pas faire bouger les éléments et ce, même si la fenêtre est étiré.

Ou bien alors (je ne sais pas si sa se fait) entrer une information dans le code qui permet au site de garder une certaine "proportion" minimum?

notobe · Answer

Excuse-moi Peex, j'ai laissé le problème en plan...

Euh, bon... je ne sais pas si nous parlons bien de la même chose.
Je te parlais de ton pied de page que tu mets en position absolue à -70px du bas de l'écran. Donc cette position se fait en fonction de la taille de l'écran. 
Si la résolution est en 1024*768, ton pied de page va se positionner à 768+70=838 px. Si la longueur du texte dépasse ces 838 px de haut, le pied de page se trouve... au milieu du texte (c'est ce qui m'arrive, que ce soit avec IE ou FF)
Et plus la fenêtre est petite, et le pied de page remonte dans le texte.

Donc, tu proposes une taille minimum... oui mais quelle taille ? Et tu contraindras aussi les gens à ne pas redimensionner leur fenêtre s'ils le veulent.... Ce n'est pas à franchement parler ce qu'on peut appeler de bonnes pratiques. Pour ma part, un site qui m'empêche de faire ce que je veux, je le quitte de suite. C'est au site de s'adapter à ma config, pas l'inverse ;)

Et es-tu sûr que ton texte sera toujours de longueur identique ? Sur toutes les pages de ton site ? Vas-tu faire autant de feuille de feuille de style de cas possibles ? Ce n'est pas gérable...
En conclusion : ne mets pas ton pied de page en position absolue, c'est un mauvais choix. Il doit suivre le flux et se trouver tout le temps en bas, quelque soit la résolution de l'écran.

Peexstudio · Answer

Hello Notobe, 

Bien enfaite j'aurais aimé appliqué la position relative mais il y a un petit problème (comme çi sa ne suffisait pas).

Je m'explique, l'image copyright (trait bleutée) fait une dimension de 82px et est donc placé avec une valeur de -82px . Ensuite viens un peux plus bas le texte du coyright par dessus placé quant-à lui à -70px pour qu'il reste sur l'image à l'endroit souhaité.
Et pour finir, la vidéo qui est a une valeur: bottom: 0 .
Ces trois éléments sont placés de façon à se que la vidéo soit pile poil au dessus du copyright et avec la position relative j'ai bien peur de ne plus pouvoir positionner le groupe composé de l'image, du texte copyright, et de la vidéo comme il se doit.

C'est difficile à expliquer, mais j'espère que tu m'a compris

notobe · Answer

Tu vas réussir à faire ça pour une résolution donnée. Mais vu l'étendue actuelle des résolutions différentes, tu n'arriveras jamais à une solution satisfaisante pour tout le monde.

Encore une fois : reste dans la logique du flux. Ne cherche pas compliqué...

Peexstudio · Answer

Bonsoir tout le monde, 

Y a du nouveau, bon j'ai pus mettre le copyright avec une position relative, le texte, et l'image aussi. De ce côté là c'est réglé.
Par contre la class="c1" (vidéo) c'est un tout autre problème, quand je la passe en position relative, elle s'affiche tout en haut de la page dans le coin supérieur gauche.
Lorsque j'applique une valeur à bottom afin de la descendre, elle descend mais une énorme marge de la taille de la "vidéo" reste sur le haut du site, ducoup j'ai tout mon contenu en bas et une très grosse bande noir en haut.

Voici le lien pour que vous puissiez visualiser le problème: http://peexstudio.fr/fr/accueil.html

Savez-vous pourquoi?

Peexstudio · Answer

Up, j'ai toujours pas réussi a solutionner le probleme malgré mes tentatives =(

monkey_monk · Answer

Il est possible que ton problème vienne du fait que tu déclares ton div "au-dessus" des autres... essayes de placer ta div en dessous de tout (dans code) et dis nous si ça s'arrange...

Bon courage !

Peexstudio · Answer

Hello,

Bien j'ai fais comme tu m'a dis et effectivement la marge qui se trouvait au dessus du menu n'y est plus mais est désormais en dessous des <table> (représentants le texte principal).
J'ai aussi constaté que cette marge noir diffère lorsque que visualise la page depuis le disque dur (marge plus petite).

Je ne comprend pas d'où peut provenir cette grande marge...

monkey_monk · Answer

Met le en position absolute ! ...le problème vient du relative, qui est inutile by the way...

Et tu peux placer ta div encore plus bas dans ton html... vu qu'il est dans le fond tu n'as pas besoin de le placer "en haut".

Peexstudio · Answer

J'avais au préalable placé la vidéo correctement en position:absolute mais la vidéo se déplaçait lorsque l'internaute réduisait la page avec sa souris, plus la fenêtre se réduisait plus la vidéo remontait jusqu'à chevaucher complètement le menu du haut...

C'est pour cela que j'ai voulu utiliser la position:relative, pour que ma vidéo ne bouge pas lorsque la fenêtre est redimensionner. Sa a marcher pour les copyright pourtant...

Comprends-tu où je veux en venir?

monkey_monk · Answer

Oui mais ce n'est pas vraiment utile... d'autant plus que le chevauchement est normal vu que ton animation est au-dessus d'autres éléments.

Place ta div en dernier dans ta page... et pour ce qui du redimensionnement, ne te prend pas la tête inutilement.
Au pire, regarde s'il est possible d'avoir un bon résultat avec un positionnement en %.

Peexstudio · Answer

Bon et bien je vais laisser cela comme ça alors, regarde sur le site:
http://peexstudio.fr/fr/accueil.html

Redimensionne la page tu vas voir ^^"

monkey_monk · Answer

Mouais c'est vrai que ça déconne un peu... on va continuer à chercher alors ! :D

Peexstudio · Answer

Bien tu vois dès le départ je sais qu'avec une position: relative la vidéo ne bouge plus, elle se fige.
J'ai même fais un essai sur l'image (trait bleu) du copyright suivit du texte copyright, et cela a marché, sa ne bouge plus.

Ou alors peut-être trouver un petit bout de code qui me permettrait d'empêcher le déplacement de la vidéo en hauteur tout en gardant la position:absolute voir même de limiter ce déplacement avec des valeurs en "px" ou même en "%" ? 

Je sais pas j'essaye de trouver ne solution =/

monkey_monk · Answer

Au pire, tu peux effectivement placer ton animation via un javascript qui redéfinit sa position en fonction de la taille de la fenêtre ! :D

Ca devrais alors fonctionner sans problème !

Affichage IE et MF différent

34 réponses

Votre réponse

Discussions similaires

Newsletters