Problème d'affichage avec Google Chrome

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Problème d'affichage avec Google Chrome

    Bonjour,

    Je tente pour la première fois de créer un site avec joomla. En suivant divers tutoriels j'ai à peu près réussi à créer un template perso (même si j'en suis qu'au premier balbutiement).

    Le souci est le suivant : sous firefox ou IE l'affichage est correct mais sous Chrome l'article du centre la page viens chevaucher le module à gauche. J'imagine qu'il s'agit d'un problème de CSS mais je n'ai rien trouvé après avoir longuement cherché des cas comme le miens sur le web.

    Je travail en local mais voici une capture du problème :



    Uploaded with ImageShack.us

    Et voilà mon CSS :
    html {
    height: 100%;
    }
    body {
    background-color: #646464;
    background-image: url(../images/degrade.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    font-family: Arial, sans-serif;
    font-size : 10px;
    padding : 0;
    margin : 0;
    }
    img {
    border : none;
    }
    a {
    color : #9e9e9e;
    text-decoration : none;
    }
    a:hover {
    text-decoration : none;
    color : #dc002d
    }
    a:focus {
    outline: none;
    }
    .clr {
    clear : both;
    }
    li {
    list-style : none;
    }
    p {
    padding : 4px 0 4px 0;
    }
    * {
    margin : 0;
    padding : 0;
    }
    h1, h2, h3, h4, h5 {
    font-size : 14px;
    font-weight : normal;
    }
    #wrapper {
    width: 1024px;
    margin: 0 auto;
    }
    #banniere {
    z-index: 1;
    width: 1022px;
    height: 150px;
    float: left;
    position: relative;
    background-image: url(../images/banniere_citroaix-vo.png);
    }
    #logo {
    position: absolute;
    z-index: 2;
    height: 108px;
    width: 153px;
    left : 5px;
    top : 25px;
    }
    /*** topmenu ***/
    #topmenu {
    height: 40px;
    background: url(../images/fond_topmenu.gif) top left no-repeat;
    }
    #topmenu li {
    height: 40px;
    padding: 2px;
    margin: 2px;
    float: left;
    width: 120px;
    line-height: 35px;
    font-size: 14px;
    text-decoration: none;
    }
    #topmenu li a {
    color: #ffffff;
    text-decoration: none;
    }
    #topmenu li a:hover, #topmenu li.current {
    color: #dc002d;
    }
    #breadcrumbs {
    height: 20px;
    }
    #gauche {
    width: 200px;
    float: left;
    padding-right: 30px;
    }
    #centre {
    float: left;
    width: 764px;
    }
    #footer {
    padding: 10px;
    text-align: center;
    }
    Merci d'avance à ceux qui offriront un peu de leur temps pour me dépanner
    (et mile excuses si je n'ai pas poster au bon endroit du forum).
    Dernière édition par NuAgE-mAgIqUe à 12/03/2012, 16h48

  • #2
    Re : Problème d'affichage avec Google Chrome

    Salut,

    Comme tu peux t'en douter c'est une vraie gageure de comprendre ce genre de bug sans voir le site, ou au moins sans le html.
    D'autant plus que les bugs de ce genre sous Chrome sont a priori plus dus à un problème dans le html que dans le css.
    Les champs identifiants et password sont-ils plus large sous chrome qu'ailleurs ?

    Commentaire


    • #3
      Re : Problème d'affichage avec Google Chrome

      Re-bonjour et merci pour cette réponse,

      Les champs identifiants et password sont au contraire moins large que sous firefox et IE, il semblerait que le module ne prenne pas en compte les indications du CSS sous Chrome et affiche la taille par défaut.

      Sinon voici le code de l'index.php du template :
      <?php
      defined('_JEXEC') or die;
      ?>
      <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction ?>">
      <head>
      <jdoc:include type="head" />

      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

      </head>

      <body>
      <div id="wrapper">
      <div id="banniere">
      <div id="logo"><a href="index.php"><img src="images/stories/logo_citroen_citroaix-vo.png" width="153" height="108" border="0" alt="logo_citroen" /></a></div>
      </div>
      <div class="clr"></div>
      <div id="topmenu">
      <jdoc:include type="modules" name="position-1" />
      </div>
      <div class="clr"></div>
      <div id="breadcrumbs">
      <jdoc:include type="modules" name="position-2" />
      </div>
      <div id="gauche">
      <jdoc:include type="modules" name="position-7" style="xhtml" />
      </div>
      <div id="centre">
      <jdoc:include type="component" />
      </div>
      <div class="clr"></div>
      <div id="footer">
      <jdoc:include type="modules" name="position-14" style="xhtml" />
      </div>
      </div>
      <jdoc:include type="modules" name="debug" />
      </body>
      </html>

      Commentaire


      • #4
        Re : Problème d'affichage avec Google Chrome

        Ok mais il faudrait plus le html exécuté (depuis ton navigateur).

        Commentaire


        • #5
          Re : Problème d'affichage avec Google Chrome

          Voilà ce que donne le code source dans Chrome :

          <!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" xml:lang="fr-fr" lang="fr-fr" dir="ltr">

          <head>

          <base href="http://localhost/joomla/" />
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <meta name="generator" content="Joomla! - Open Source Content Management" />
          <title>Nos occasions</title>
          <link href="/joomla/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
          <link href="/joomla/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
          <link href="/joomla/templates/template_citroen/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
          <script src="/joomla/media/system/js/mootools-core.js" type="text/javascript"></script>
          <script src="/joomla/media/system/js/core.js" type="text/javascript"></script>
          <script src="/joomla/media/system/js/caption.js" type="text/javascript"></script>
          <script type="text/javascript">
          window.addEvent('load', function() {
          new JCaption('img.caption');
          });
          function keepAlive() { var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
          </script>




          <link rel="stylesheet" href="/joomla/templates/system/css/system.css" type="text/css" />

          <link rel="stylesheet" href="/joomla/templates/system/css/general.css" type="text/css" />

          <link rel="stylesheet" href="/joomla/templates/template_citroen/css/template.css" type="text/css" />



          </head>



          <body>

          <div id="wrapper">

          <div id="banniere">

          <div id="logo"><a href="/joomla/index.php"><img src="/joomla/images/stories/logo_citroen_citroaix-vo.png" width="153" height="108" border="0" alt="logo_citroen" /></a></div>

          </div>

          <div class="clr"></div>

          <div id="topmenu">


          <ul class="menutopmenu">
          <li class="item-101 current active"><a href="/joomla/" >Nos occasions</a></li><li class="item-105"><a href="/joomla/index.php/a-propos-de-nous" >À propos de nous</a></li></ul>


          </div>

          <div class="clr"></div>

          <div id="breadcrumbs">


          <div class="breadcrumbs">
          <span class="showHere">Vous êtes ici : </span><span>Accueil</span></div>


          </div>

          <div id="gauche">

          <div class="moduletable">
          <form action="/joomla/index.php" method="post" id="login-form" >
          <fieldset class="userdata">
          <p id="form-login-username">
          <label for="modlgn-username">Identifiant</label>
          <input id="modlgn-username" type="text" name="username" class="inputbox" size="18" />
          </p>
          <p id="form-login-password">
          <label for="modlgn-passwd">Mot de passe</label>
          <input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18" />
          </p>
          <p id="form-login-remember">
          <label for="modlgn-remember">Se souvenir de moi</label>
          <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/>
          </p>
          <input type="submit" name="Submit" class="button" value="Connexion" />
          <input type="hidden" name="option" value="com_users" />
          <input type="hidden" name="task" value="user.login" />
          <input type="hidden" name="return" value="aW5kZXgucGhwP0l0ZW1pZD0xMDE=" />
          <input type="hidden" name="be0ead2de09791b38850e413642e1143" value="1" /> </fieldset>
          <ul>
          <li>
          <a href="/joomla/index.php/component/users/?view=reset">
          Mot de passe oublié ?</a>
          </li>
          <li>
          <a href="/joomla/index.php/component/users/?view=remind">
          Identifiant oublié ?</a>
          </li>
          <li>
          <a href="/joomla/index.php/component/users/?view=registration">
          Créer un compte</a>
          </li>
          </ul>
          </form>
          </div>


          </div>

          <div id="centre">

          <div class="blog-featured">
          <h1>
          Nos occasions </h1>

          <div class="items-leading">
          <div class="leading-0">

          <h2>
          <a href="/joomla/index.php/2-non-categorise/4-test-accueil">
          test accueil</a>
          </h2>

          <ul class="actions">
          <li class="print-icon">
          <a href="/joomla/index.php/2-non-categorise/4-test-accueil?tmpl=component&amp;print=1&amp;page=" title="Imprimer" onclick="window.open(this.href,'win2','status=no,t oolbar=no,scrollbars=yes,titlebar=no,menubar=no,re sizable=yes,width=640,height=480,directories=no,lo cation=no'); return false;" rel="nofollow"><img src="/joomla/media/system/images/printButton.png" alt="Imprimer" /></a> </li>
          <li class="email-icon">
          <a href="/joomla/index.php/component/mailto/?tmpl=component&amp;template=template_citroen&amp; link=b54b34e65e23dfc196fabdf399d72dfde3257029" title="E-mail" onclick="window.open(this.href,'win2','width=400,h eight=350,menubar=yes,resizable=yes'); return false;"><img src="/joomla/media/system/images/emailButton.png" alt="E-mail" /></a> </li>

          </ul>




          <dl class="article-info">
          <dt class="article-info-term">Détails</dt>
          <dd class="category-name">
          Catégorie : <a href="/joomla/index.php/2-non-categorise">Non catégorisé</a> </dd>
          <dd class="published">
          Publié le lundi 12 mars 2012 15:13 </dd>
          <dd class="createdby">

          Écrit par Super Utilisateur </dd>
          <dd class="hits">
          Affichages : 0 </dd>
          </dl>


          <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>


          <div class="item-separator"></div>
          </div>
          </div>



          </div>


          </div>

          <div class="clr"></div>

          <div id="footer">



          </div>

          </div>



          </body>

          </html>

          Commentaire


          • #6
            Re : Problème d'affichage avec Google Chrome

            Étrange que ça fonctionne sous IE et pas Chrome, en général c'est cette vieille charogne de IE qui pose problème...

            Bien au niveau de :

            #centre {
            float: left;
            width: 764px;
            }

            essai d'enlever le "float:left;",

            Si ça ne marche pas et/ou si c'est pire, essaie :

            #centre {
            float: left;
            width: 764px;
            margin-left: la largeur de ta barre de module + 30px;
            }

            OU la même chose sans le float:left;

            tu à aussi une console de développement pour chrome,

            bon courage

            Commentaire


            • #7
              Re : Problème d'affichage avec Google Chrome

              Merci pour ton aide,

              Malheureusement, j'avais déjà essayé ces modifs. Chrome reste de marbre et ne semble pas prendre en compte ces changements, alors que les autres navigateurs oui...

              En regardant de plus près avec "inspecter les éléments" (j'imagine que c'est la console dont tu parles) il m'indique sur la div #gauche :
              #gauche {
              width: 100px;
              float: left;
              }
              Si je décoche le width: 100px; tout rentre dans l'ordre...dingue non ?

              J'ai vérifier pour firefox avec firebug, le width est bien à 200px comme je le veux.

              Commentaire


              • #8
                Re : Problème d'affichage avec Google Chrome

                Si je décoche le width: 100px; tout rentre dans l'ordre...dingue non ?
                Le cache de Chrome a tendance à être très persistant avec les css, essaye de rafraîchir la page avec ctrl+r.
                Si ça ne marche pas la console de Chrome te dira où est situé ce width:100px;

                Commentaire


                • #9
                  Re : Problème d'affichage avec Google Chrome

                  Merci à toi, cela a fonctionné !

                  Je ne connaissais pas ce caprice de Chrome, merci pour le tuyeau.

                  Merci à tous, problème résolu

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X