Affichage CSS - IE : ok - Firefox : pas ok

Locace · 12 Janvier 2007

Bonjour,

EDIT : Le problème énoncé ci-dessous arrivait lorsque e testais ma page offline. Depuis je l'ai testé en ligne et les différences sont plus nomreuses et plus marquantes !!! Pardon mais, quel bordel ! Comment expliquer cette différence entre le off et le on-line ? Et est-il possible d'avoir une page parfaitement compatible avec IE, Firefox et Opera ???

Je vous écris car j'ai beau retourner le problème dans tous les sens je ne le comprends pas. C'est d'autant plus frustrant qu'il s'agit en apparence d'un truc tout bête. Je m'explique :

La page sur laquelle je travaille devrait ressembler à celle-ci. Mon problème concerne la partie blanche bordée de orange.

En effet celle-ci ne s'affiche tout simplement pas sous Firefox ou Opera. Encore plus étrange, pour une fois c'est sur Internet Explorer (7.0) que cela fonctionne.

Voici les liens :

- La page qui marche sur IE mais pas Firefox

- La CSS qui lui est liée

Voila à noter que le problème concerne le #corps que vous trouverez vers le haut de la CSS.

Voila mon problème, j'espère qu'un Sherlock Holmes du CSS, trouvera les indices que je ne vois pas. Je l'en remercie d'avance. A charge de revanche bien sur.

Tchuss

Modifié 12 Janvier 2007 par Locace

Dudu · 12 Janvier 2007

Salut Locace

(est-ce normal si le logo est ÉNORME ?)

Il ne faut pas perdre de vue un point très important dans la corrélation (X)HTML/CSS: le navigateur n'adapte pas les styles au code HTML tel que tu l'as écrit. Il adapte les styles au code HTML qu'il a compris.

Et ça, c'est très différent.

Explications: si tu as une erreur dans ton document par exemple un slash oublié sur une balise fermante (<p>...<p> au lieu de <p>...</p>), ton navigateur peut très bien comprendre l'erreur. Ou il peut très bien aussi l'ignorer. Ou encore, comprendre l'erreur d'une autre façon.

Et qui va en faire les frais: l'affichage. Car l'affichage est décidé par la feuille de style qui, comme je le disais, est adaptée au code HTML tel que le navigateur l'a compris.

Pourquoi je raconte tout ça ?

Tu as choisi d'héberger tes pages gratuitement chez Lycos/Multimania. Tu te seras aperçu du cadre de publicité sur la droite de tes pages Regarde désormais le code Javascript qui appelle ce cadre: il est placé n'importe comment au dessus de ton code HTML. En un mot comme en dix-mille: ton code est complètement invalide, mal conçu, mal imbriqué, et il perturbe la bonne compréhension des navigateurs.

Je peux te citer des tonnes d'exemples d'un code valide, conforme, et bien conçu qui se retrouve mal affiché car détériorié par le code JS de Lycos...

Donc si tu veux avoir une vision bien nette de ton travail: change d'hébergeur

Au passage, un petit pack hébergement + nom de domaine ne coûte que quelques euros par an...

edit: je viens de t'expliquer ton edit, en fait

Locace · 12 Janvier 2007

Merci de la réponse Dudu, je vais tester sur un autre hebergement (mais ou ?). Si c'est Lycos qui me met ddans, je suis rassuré.

Espoir, espoir !

karnabal · 12 Janvier 2007

Salut,

Il y a un sujet en cours concernant les hébergeurs.

Locace · 14 Janvier 2007

Je dois vous remercier, le problème venait en effet du code implanté sauvagement par Lycos.

Cependant le problème pour lequel je suis venu vous voir initialement reste entier, en effet Firefox refuse d'afficher la partie blanche bordée de orange qui apparait bien sous IE 7.

Pourtant le <div> (#corps) concerné englobe bien l'ensemble l'ensemble des autres balises.

Je suppose que la plupart des Internautes trainant leur guêtres sur ce forum sont équipés de Firefox, je vos redonne donc les liens pour vérifier par vous mêmes. Comme disait Lilou dans le 5ème élements avec ses beaux yeux bleux : Please, help

La page concernée

La feuile d style

Modifié 14 Janvier 2007 par Locace

baulet · 14 Janvier 2007

bonjour

il semble que 2 balises div ne soient pas fermées...

essaye ça : (enregistre le fichier en utf-8 tel que ou change le charset pour celui que tu utilises 8859-1)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
      Untitled Document
    </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="corps">

      <!-- PARTIE BLANCHE & BORDURES ORANGES -->
      <!-- BANNIERE DU HAUT (header) -->
      <div id="header">
        <!-- titre du header -->
        <h1>
          <span>Meubles et accessoires pour votre vin <!-- texte --></span> Meubles et accessoires pour votre vin <!-- ombre -->
        </h1><!-- Il faut changer les DEUX lignes afin d'avoir un texte et une ombre identiques -->

        <!-- logo -->
        <div id="logo">
          <img src="images/logo_case_a_vins.png" />
        </div><!-- Le positionnement et la taille du logo sont gérés dans la feuille de style -->
      </div><!-- Fin header -->
      <!-- MENU -->
      <div id="menu">
        <div id="menu_top"></div>
        <div id="menu_liste">

          <!-- rubriques du menu -->
          <h2>
            <a href="#">Accueil</a>
          </h2>
          <ul>
            <li>
              <a href="#">Présentation</a>
            </li>

            <li>
              <a href="#">Exemples de cave</a>
            </li>
            <li>
              <a href="#">Plan du site</a>
            </li>
          </ul>
          <h2>

            <a href="#">Catalogue</a>
          </h2>
          <ul>
            <li>
              <a href="#">Tout voir</a>
            </li>
            <li>
              <a href="#">Meubles</a>

            </li>
            <li>
              <a href="#">Rangements</a>
            </li>
            <li>
              <a href="#">Accessoires</a>
            </li>
          </ul>

          <h2>
            <a href="#">Commande</a>
          </h2>
          <ul>
            <li>
              <a href="#">Bon de commande</a>
            </li>
            <li>

              <a href="#">Securité</a>
            </li>
            <li>
              <a href="#">Livraisons</a>
            </li>
          </ul>
          <h2>
            <a href="#">Technique</a>

          </h2>
          <h2>
            <a href="#">Contact</a>
          </h2><br />
        </div><!-- fin des rubriques -->
        <div id="menu_bas"></div>
        <div id="menu_footer"></div>
      </div><!-- fin menu -->

      <!-- CORPS DE LA PAGE -->
      <div id="corps_container">
        <div id="sous_header_container">
          <img id="sous_header_container_droite" src="images/droite_sous_header_cas_a_vi.png" name="sous_header_container_droite" />
        </div>
        <div id="red_container">
          <div class="cadre">
            <div class="top">
              <div class="gauche"></div>

              <div class="middle"></div>
              <div class="droite"></div>
            </div>
            <div class="centre">
              <div class="corps">
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo, pede vitae molestie feugiat, eros diam mattis lectus, id ullamcorper lorem velit eu nisl. Aliquam laoreet ante vel justo. Morbi sit amet sem dapibus lectus pulvinar laoreet. Morbi id risus nec lorem placerat laoreet. Nulla ac augue eget lacus laoreet faucibus. Phasellus commodo, orci sed volutpat iaculis, dolor magna condimentum enim, in cursus velit turpis quis nunc. Nullam id massa vel lorem egestas
                  ultricies. Pellentesque laoreet, eros rutrum fermentum gravida, magna ipsum accumsan elit, id ultricies nisl urna ac mauris. Praesent mollis felis eu diam. Quisque scelerisque egestas pede. Nunc fermentum nunc. Quisque at tellus.
                </p>
                <p>

                  <a href="#">Nullam imperdiet</a>, odio vel aliquet gravida, diam nisi blandit nisl, mattis commodo elit ligula ac quam. Integer pulvinar nonummy tellus. Suspendisse ac metus. Mauris nisi mi, adipiscing nec, lobortis ut, facilisis eget, mi. Phasellus quis enim. Suspendisse potenti. Fusce tortor. Proin dignissim neque eget quam. Morbi sit amet turpis. Fusce aliquet. Praesent venenatis. Nulla justo nisl, lobortis quis, dignissim ut, bibendum et, augue. Vivamus sed est nec augue
                  imperdiet ultricies. Fusce pretium, diam ut iaculis commodo, erat sem lacinia justo, nec elementum erat lectus eu nisi. Pellentesque id tellus quis massa ornare interdum. In hac habitasse platea dictumst. Pellentesque suscipit faucibus mauris. Mauris elit. Maecenas enim tellus, laoreet eget, tempor sed, luctus quis, leo. Phasellus blandit, mauris in porta tempus, augue lorem condimentum neque, in accumsan augue felis in lectus.
                </p>
              </div>
            </div>
            <div class="footer">
              <div class="gauche"></div>
              <div class="centre">
                <img src="images/deco2_case_a_vins.png" />
              </div>

              <div class="droite"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Modifié 14 Janvier 2007 par baulet

Dudu · 14 Janvier 2007

Salut

(est-ce normal si le logo est ÉNORME ?)

Je viens de comprendre le sens de ma remarque: j'utilise Safari. Et apparemment le bug que tu as avec Firefox n'est rien en comparaison de celui que tu as avec Safari.

Capture d'écran:

Connexion

Affichage CSS - IE : ok - Firefox : pas ok

Sujets conseillés

Locace

Lien vers le commentaire

Partager sur d’autres sites

Dudu

Lien vers le commentaire

Partager sur d’autres sites

Locace

Lien vers le commentaire

Partager sur d’autres sites

karnabal

Lien vers le commentaire

Partager sur d’autres sites

Locace

Lien vers le commentaire

Partager sur d’autres sites

baulet

Lien vers le commentaire

Partager sur d’autres sites

Dudu

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité