Partage
  • Partager sur Facebook
  • Partager sur Twitter

Rendu différent sur 3 navigateurs avec le même code ...

S'il vous plaît, aidez-moi...

    21 février 2006 à 2:07:12

    Bonjour à tous,

    Je poste ce message, car j'ai besoin d'aide, je suis en train de refaire la partie HTML/PHP/CSS de mon site ((http://oximoron.free.fr) pour respecter les normes xhtml. J'avais un peu près 800 erreurs sur certaines pages :lol: ( balises en majuscules, balises pas fermées, code tout pourri ^^ ) ... j'en ai déjà corrigé pas mal, et je m'attaque au principal, le dessin je dois donc remplacer mes tableaux par des div. Je me suis fixé quelques règles : respect des normes xhtml, site extensible horizontalement et verticalement, compatible avec Internet Explorer, FireFox et Opera.

    Alors voilà, je n'en peu plus, je m'arrache les cheveux, les 3 navigateurs m'épuisent à ne pas sortir le même résultat avec le même code :(

    La page html
    Le fichier CSS
    Une archive zip avec tous dedans (images, css, html)

    Je vous expose mes problèmes et vous remercie d'avance pour toute aide :


    1) Sous Internet Explorer seulement :
    J'ai un espace horizontal entre mes balises div de la couleur du Body. Comment les enlever ?
    Capture d'écran (Internet Explorer)


    2) Sous Internet Explorer, FireFox, Opera (ca doit venir de moi là ^^ )
    Quand je redimensionne trop horizontalement mes balises div vont à la ligne au lieu de faire apparaître l'ascenseur horizontal
    capture d'écran (Tous)

    3) Sous Internet Explorer, FireFox, Opera (et un rendu différent pour chaque, un :colere: )
    C'est donc le pire, seul Internet Explorer à un rendu logique o_O . Je m'explique, si je mets un tableau avec une taille en % seul Internet Explorer prend la taille de la balise div où il est, les autres prennent la taille de je ne sais quoi et ... ça ne va pas ;)
    Capture d'écran (Internet Explorer)
    Capture d'écran (FireFox)
    Capture d'écran (Opera)


    Je vous remercie d'avance pour toute aide.
    oximoron
    • Partager sur Facebook
    • Partager sur Twitter
      21 février 2006 à 6:38:57

      Salut.
      petits problemes dus au parser des navigateurs mais vite resolus.
      Avant 1 ou 2 questions, pourquoi utiliser un table ?
      ceci etant voila les corrections a apporter

      body
      {    width:100%;
               background-color :Aqua;
               margin:0;
               padding:0;
      }
      #Coin_Haut_Gauche
      {

              width: 165px;
              height: 89px;
              float: left;
              border: 0px;
              background-repeat: no-repeat;
              background-image: url(Style_test/Coin_Haut_Gauche.gif);
              margin: 0px -3px 0px 0px;
              padding: 0px;
      }
      #Coin_Haut_Droit
      {

              height: 89px;
              width: 66px;
              float: right;
              border: 0px;
              background-repeat: no-repeat;
              background-image: url(Style_test/Coin_Haut_Droit.gif);
              margin: 0px 0px 0px -3px;
              padding: 0px;
      }
      #Barre_Haut
      {

              width: auto;
              height: 89px;
              border: 0px;
              background-repeat: repeat;
              background-image: url(Style_test/Barre_Haut.gif);
              margin: 0px;
              padding: 0px;
      }
      #Coin_Bas_Gauche
      {

              width: 165px;
              height: 55px;
              float: left;
              background-repeat: no-repeat;
              background-image: url(Style_test/Coin_Bas_Gauche.gif);
              margin: 0px -3px 0px 0px;
              padding: 0px;
      }
      #Coin_Bas_Droit
      {

              width: 66px;
              height: 55px;
              float: right;
              background-repeat: no-repeat;
              background-image: url(Style_test/Coin_Bas_Droit.gif);
              margin: 0px 0px 0px -3px;
              padding: 0px;
      }
      #Barre_Bas
      {

              width: auto;
              height: 55px;
              background-repeat: repeat;
              background-image: url(Style_test/Barre_Bas.gif);
              margin: 0px;
              padding: 0px;
      }
      table { width:auto; }

      ne mets pas d'attributs de mise en forme dans le code html , enleve table width="100%".
      un tableau est un element html bloc qui s'adapte a la largeur du conteneur,quand celui-ci est entouré de flottants comme c'est le cas ici il va prendre 100% du body puisque les flottants sont considerés comme n'etant pas dans le flux de la page seul un bug du parser de IE fait que il prend la taille du conteneur.
      de meme qu'il oblige a mettre des valeurs negatives pour les marges afin d'eviter cet espace créé entre les elements.
      Pour les retours a la ligne c'est tout a fait normal puisque tu as 3 elements separés tous les navigateurs font un retour a la ligne lorsqu'il y a une cesure et que les dimensions depassent la taille du conteneur ici l'ecran.si tu veux forcer le scroll horizontal il faut mettre tes elements dans un conteneur unique auquel tu appliques un largeur superieure a l'ecran.
      Avec les les corrections que j'ai apporté ta page a le meme affichage sous IE FF Opera et Nscape.
      Si probleme n'hesite pas a me contacter

      • Partager sur Facebook
      • Partager sur Twitter
        21 février 2006 à 8:07:02

        Merci de m'avoir répondu aussi vite et avec une grande précision.

        Pourquoi j'utilise des balises table à la place des div ? étant donné que mon site est en php et que certaines pages sont générées, la manipulation des tableaux est super facile en php si on veut rajouter une ligne ou une colonne par exemple.

        Cepandant, j'ai encore un petit problème au niveau du retour à la ligne de mes balises div lors d'un redimensionnement.

        Capture FireFxo
        Capture IE

        Je suis chiant avec mon problème, mais c'est très gênant surtout dans la balise div 'Centre' (là où il y a mon site) car si je mets une image assez grande celui qui aura une résolution inférieure à cette image aura un affichage tout caca :(
        J'ai rajouté un conteneur (c'est bien une balise div ? o_O ) appelé 'Page' qui englobe mes 9 autres balises div

        Citation : jp949

        il faut mettre tes éléments dans un conteneur unique auquel tu appliques un largeur supérieure a l'écran.


        alors si je mets dans mon css une largeur de 101% (pour ma balise div 'Page') j'ai toujours un ascenseur, mais le retour à la ligne est toujours présent. SI par contre je mets une taille fixe en pixel, alors là ça marche, mais mon site n'est plus dynamique :(

        J'ai mis les fichiers à jour (voir les liens plus haut):

        Sinon j'en profite pour une petite question au passage, les fenêtres dans le site ("aperçu final", "30 derniers messages" ...) qui ressemblent à des iframes sont réalisées à l'aide d la balise 'tbody' ? Ça peut être super pratique moi qui ai horreur des frames et autres iframes.

        Encore une fois je vous remercie d'avance.
        • Partager sur Facebook
        • Partager sur Twitter
          21 février 2006 à 8:17:06

          si c'est dans le div #centre que tu dois avoir un defilement horizontal il faut preciser la hauteur et mettre un overflow:auto; dans #milieu
          • Partager sur Facebook
          • Partager sur Twitter
            21 février 2006 à 11:37:02

            Merci pour ta réponse, mais elle ne me convient pas, cela ne fait pas ce que je veux (juste qu'il arrête de faire passer à la ligne mes balises Div). J'ai regardé un peu partout, les dessins de sites et tout, mais les seuls qui ont un affichage "correct" (c'ést à dire pas fixe) sont ceux qui utilisent des tableaux. C'est vraiment dommage, mais encore une fois, je trouve que la normalisation empêche de faire ce qu'on veut(c'est mission impossible avec un site graphique avec des menus partout). Je trouve aussi bien dommage qu'il y ait 500 moteurs de rendus HTML.

            Bon je laisse donc les balises div en attente, et je vais repartir sur mes 'table'.
            Ça doit être possible de passer la normalisation avec des 'table' :)

            Merci de votre aide, et si vous avez une solution je suis preneur
            • Partager sur Facebook
            • Partager sur Twitter
              21 février 2006 à 17:55:47

              tu as tord le css c'est puissant , ta page est en ligne telle que tu la voulais et sans tableau
              http://www.jp949.info/oxymon/test.html
              • Partager sur Facebook
              • Partager sur Twitter
                21 février 2006 à 23:13:38

                merci pour ton aide. Mais j'ai préféré adapter mes tableaux avec des classes pour respecter les contraintes que je m'étais fixé. Je pense avoir fais une grosse erreur, il est bien fou de vouloir convertir un site fais en Tableaux à un desing en div et inversement. Je pense qu'il est vital de choisir aux moment de la création du site et pas pendant, c'est un peu comme le cas qui fait 90% de son site en php et qui refais tout en asp parcequ'il le trouve mieux, c'est assez ridicule. ;)

                Pour les css je ne doute pas de leurs puissances, je me suis mal exprimé, je voulais dire que le jour où tout le monde sera d'accord sur la méthode de rendu, la ca sera puissant, mais je trouve que l'on passe beaucoup trop de temps à bidouiller pour que ca marche sur tous les navigateurs.
                • Partager sur Facebook
                • Partager sur Twitter
                  22 février 2006 à 15:13:05

                  question d'habitude il ne faut pas plus de temps avec css que avec les tables.
                  quand tu as commencé avec les tables tu as passé du temps avant de comprendre leur fonctionnement
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Rendu différent sur 3 navigateurs avec le même code ...

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur
                  • Markdown