Affichage IE et MF différent
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é?
Configuration: Windows XP Firefox 3.5.5
34 réponses
Des pages web s'affichent différemment sous Internet Explorer par rapport à d'autres navigateurs, et le rendu en ligne est brouillé malgré des prévisualisations locales. Plusieurs éléments et pistes de solution émergent, comme éviter les positions absolues pour le pied de page et assurer le flux du document, et vérifier le doctype et la validité HTML. D'autres conseils portent sur des soucis de code comme des balises non fermées, l'utilisation de tableaux pour la mise en page et l'absence d'attribut alt sur les images de menu. En parallèle, il est préconisé d'adapter le site au flux et à la résolution plutôt que d'imposer des tailles fixes, afin d'éviter que le pied de page ne recouvre le texte.
-
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 ! -
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 =/ -
Mouais c'est vrai que ça déconne un peu... on va continuer à chercher alors ! :D
-
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 ^^" -
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 %.
-
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? -
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". -
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... -
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 ! -
Up, j'ai toujours pas réussi a solutionner le probleme malgré mes tentatives =(
-
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? -
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é... -
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 -
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. -
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? -
Ca ne serait pas un problème de z-index par hasard ?
Parce qu'avec le nombre de div... et connaissant IE ^^ -
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. -
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 ! -
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é. -
Aaah mais Notobe, agrandi ta fenêtre avec le bouton adéquate en haut à droite, tout devrait retourné dans l'ordre non?
- 1
- 2