Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

Problème d'affichage de mon site sur certains navigateurs

https://forum.phpfrance.com/viewtopic.php?f=8&t=270165

Page 1 sur 1

Problème d'affichage de mon site sur certains navigateurs

Posté : 27 janv. 2014, 16:02
par S@ori
Bonjour,
J'ai un site en local en php.
Il s'affiche très bien sur Firefox 3.5 et inférieur mais s'affiche mal sur tous les autres navigateurs (Firefox 4 et sup., Chrome, Internet Explorer).
Par mal, j'entends qu'il n'affiche pas l'authentification (login + mot de passe), par le titre, pas le menu latéral, juste un texte avant le menu.

Je sais qu'il est difficile de régler ce problème comme ça sans en savoir lus (mon site est en local en plus). Mais savez-vous où je dois regarder et appronfondir ?
Est dans les fichiers .php ou bien est ce une question de feuille de style ?

Merci

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 27 janv. 2014, 16:12
par Spols
tu utilise bien un serveur local ? comme wamp ou easyphp ?
sinon tu peux regarder du coté du code source, ctrl+U et voir si php renvoie bien le code prévu

copie/colle nous ce code sinon on pourra vois si la css est foireuse

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 27 janv. 2014, 17:18
par S@ori
En premier lieu, un énorme merci pour cette réponse.
Oui j'utilise wamp serveur comme serveur local.
Mon site (en fait il s'agit d'une base de données en sql dont le formulaire de consultation est en php pour pouvoir l'afficher dans un navigateur web) fonctionne parfaitement bien sous firefox 3.5.

En gros sur Chrome et les autres, rien ne s'affiche hormis l'image en en-tête et le titre du menu à gauche.
En comparant le code source de la page ouverte à partir de Chrome et celle ouverte à partir de la version de Firefox qui fonctionne, on note des différences. EN gros c'est à partir de la ligne commençant par select.

Est ce que cela viendrait de la version du code php utilisé qui ne serait plus valable sur les nouveaux navigateurs ?

Voici le code copié à partir de Chrome (où l'affichage se fait mal) : (voulez vous aussi que je vous copie-colle le code de la page ouverte sous firefox 3.5 ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <header>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Pragma" content="no-cache" />
    <style type="text/css">
      @import url(/css/default.css);
    </style>
    <script type="text/javascript" src="/css/dynamique.js"></script>
    <link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
    <title>TheseCecile</title>
  </header>
  <body>
    <div id='top'>
      <div id='load_in_progress' style='display: none;'>
        <table class='filter'>
          <thead>
            
          </thead>
          <tbody>
            <tr style='background-color:transparent'>
              <td valign='top' align='center'>
                <br />
                <table style='border-spacing:0px'>
                  <thead>
                    
                  </thead>
                  <tbody>
                    <tr class='loader'>
                      <td>
                        <img src='/images/loader.gif'  />
                      </td>
                      <td>
                        <p>
                          Veuillez patienter.
                          <br />
                          Chargement en cours ...
                        </p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div id='sidebar'>
      <div id='menu'>
        <ul>
          <h2>
            Navigation
          </h2>
        </ul>
      </div>
    </div>
    <div id='page'>
      <div id='resultat'>
        <div class="resultat">
         <!-- SELECT
  *
FROM
  menu
WHERE
  niveau_droit <= 0
ORDER BY
  num_sequence, profondeur --/>
          Merci de vous identifier
        </div>
      </div>
    </div>
    <div id='toolbar'>
      <div id='authentification'>
        <div style='text-align:center;'>
          <h2>
            Authentification
          </h2>
          <form action='/auth.php' method='POST'>
            <table>
              <thead>
                
              </thead>
              <tbody>
                <tr class="l0">
                  <td>
                    Pseudo :
                  </td>
                  <td>
                    <input name='pseudo' value='' type='text' size='10' />
                  </td>
                </tr>
                <tr class="l1">
                  <td>
                    MdP :
                  </td>
                  <td>
                    <input name='password' value='' type='password' size='10' />
                  </td>
                </tr>
              </tbody>
            </table>
            <input name='Connexion' value='Connexion' type='submit' />
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 27 janv. 2014, 17:20
par S@ori
Désolée pour le double post.

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 27 janv. 2014, 17:31
par Spols
Le problème ne vient certainement pas de php.
Il est exécuté coté serveur et est indépendant du navigateur (car il fonctionne et termine ses actions avant que le navigateur entre en ligne de compte)

Je pencherais plutot pour une erreur de javascript qui empêche la page de s'afficher jusqu'au bout.

Essaye de trouver la console d'erreur de firefox (je me rappel plus comment on l'ouvre sans avoir les extensions de firefox que j'ai)
moi j'utilise la toolbar webdeveloper et firebug et j'appuie sur l'avant dernier icone de la toolbar (une croix ou un V)

Vérifie que la feuille de style et le script javascript sont bien chargé et que javascript est bien activé.

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 27 janv. 2014, 17:36
par S@ori
Ok
Merci pour ces indices, je vais voir de ce coté.
Mais je vais regarder cela sur Chrome ou sur IE. Car le firefox installé sur mon ordi est justement la 3.5 qui fonctionne.

Merci pour tout.

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 28 janv. 2014, 12:32
par S@ori
Hello
J'ai bien galéré et je n'ai toujours pas trouvé d'où venait le problème.
Apparemment, il y a pleins d'erreur dans ma feuille de style css. Le problème c'est que ces erreurs concernent des lignes qui n'apparaissent pas dans mon fichiers css..

Voici ce que me dit le valideur de css (je n'ai pas tout copié car il y a 100 erreurs :

URI : TextArea
3 .infoTip La propriété pointer-events n'existe pas : none
3 .infoTipLoading Propriété erronée : background url(chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/chrome://firebug/skin/loading_16.gif) n'est pas une URL correcte. url(chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/chrome://firebug/skin/loading_16.gif) no-repeat
3 h1.groupHeader Propriété erronée : background url(chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/group.gif) n'est pas une URL correcte. url(chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/group.gif) repeat-x
3 .textEditorInner1 Propriété erronée : background url(chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/textEditorBorders.png) n'est pas une URL correcte. url(chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/textEditorBorders.png) repeat-y

Le truc c'est que ma feuille de style ne contient pas .infoTip etc....
Je suis perdue.
Mais ça m'étonne que cela un point aussi bloquant pour Chrome alors tout marche bien sur FireFox 3.5.

Voici la copie de ma feuille de style : 
body {
background : #000000;
color : #FFFFFF;
font-family : Open Sans Condensed, Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
margin : 0 0 0 0;
padding : 0;
width : 100%;
font-size : 100%;
}
h1 {
color : #AEED00;
}
h2 {
color : #AEED00;
}
h3 {
color : #AEED00;
}
a {
text-decoration : none;
color : #AEED00;
}
a.delete {
color : #FF5B2B;
}
table {
border-width : 0 0 0 0;
border-spacing : 2px;
border-style : outset outset outset outset;
border-color : gray gray gray gray;
border-collapse : separate;
background-color : #D2D2D2;
margin-left : auto;
margin-right : auto;
vertical-align : middle;
font-family : Open Sans Condensed, Verdana, Arial, Helvetica, sans-serif;
font-size : 13px;
}
table th {
font-size : 15px;
border-width : 0 0 0 0;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
background-color : #000000;
font-family : Open Sans Condensed, Verdana, Arial, Helvetica, sans-serif;
font-size : 15px;
}
table th a {
text-decoration : none;
color : #8C3FC5;
font-family : Open Sans Condensed, Verdana, Arial, Helvetica, sans-serif;
font-size : 18px;
}
table th a:hover {
color : #5F0060;

}
table tr {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #000000;
vertical-align : top;
}
table caption {
font-size : 12px;
font-style : italic;
padding-bottom : 10px;
padding-top : 10px;
text-align : left;
caption-side : bottom;
}
pre {
text-align : left;
font-size : 11px;
border-width : 1px 1px 1px 1px;
border : gray solid 1px;
background-color : #000000;
}
.resultat {
text-align : center;
}
tr.l0 td {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #000000;
}
tr.l1 td {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #000000;
}
tr.to_late td {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #000000;
}
tr.to_validate td {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #000000;
}
tr.schedule td {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #000000;
}
tr.packaging td {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #000000;
text-decoration : blink;
}
tr.done td {
border-width : 1px 1px 1px 1px;
padding : 3px 3px 3px 3px;
border-style : hidden hidden hidden hidden;
border-color : gray gray gray gray;
background-color : #AEED00;
}
tr.loader {
background-color : transparent;
height : 50px;
width : 380px;
}
table.filter {
background-color : transparent;
height : 100%;
left : 0;
padding : 0;
position : absolute;
top : 0;
width : 100%;
}

#top {
background : url(http://unoeilsurlapub.com/wp-content/uploads/2013/06/Logo_texte_blanc-300x68.png) transparent;
border-bottom : 0 solid #FFFFFF;
padding-top : 15px;
padding-bottom : 15px;
margin-right : 1142px;
height : 40px;
text-align : center;
}

#sidebar {
float : left;
font-size : 15px;
padding-left : 10px;
padding-right : 10px;
line-height : 170%;
text-align : justify;
voice-family : inherit;
width : 15%;
}


#page {
padding-left : 10px;
padding-right : 10px;
padding-top : 20px;
float : left;
width : 65%;
}


#toolbar {
float : right;
font-size : 11px;
line-height : 170%;
padding-bottom : 24px;
padding-left : 10px;
padding-top : 10px;
text-align : justify;
width : 15%;
}


#title {
text-align : center;
color : #FFFFFF;
}


#resultat {
margin : 0;
padding : 0;
text-align : center;
}


#menu {
float : left;
width : 180px;
padding-top : 10px;
line-height : 170%;
font-size : 11px;
text-align : justify;
voice-family : "\"\"";
voice-family : inherit;
}

#menu h2 {
color : #aeed00;
padding : 5px;
font-size : 2em;
}

#menu h3 {
border-bottom : 1px solid #999;
color : #aeed00;
padding : 2px 0;
margin : 0;
font-weight : normal;
font-size : 1.5em;
}

#menu ul {
padding-left : 0;
margin : 0 0 0 0;
list-style : none;
}

#menu li {
display : block;
color : #aeed00;
padding : 2px 0;
border-bottom : 1px solid #999;
font-size : 1.3em;
}

#menu a {
text-decoration : none;
color : #aeed00;
padding-left : 12px;
}
#menu a:hover {
}

#authentification {
font-size : 15px;
text-align : justify;
voice-family : "\"\"";
}
#authentification h2 {

color : #FFFFFF;
padding : 5px;
font-size : 12px;
}

Merci par avance

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 28 janv. 2014, 12:48
par moogli
Modération :
Afin d'améliorer la lisibilité de ton message,
pense à utiliser les balises [code] ou [php] (selon le langage utilisé).

Elles sont disponibles au-dessus de la zone de saisie de ton message
lorsque tu postes un nouveau message.

Des indications sont disponibles sur la manière de mettre en forme vos messages dans la FAQ

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 28 janv. 2014, 12:53
par S@ori
Ok merci pour la précision, je ferai attention la prochaine fois.

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 28 janv. 2014, 12:58
par moogli
merci ;)


effectivement ce que tu indique n'est pas dans ta css à toi mais l'import JS en dessous en est peu être la cause 
<script type="text/javascript" src="/css/dynamique.js"></script>

pour le reste : mise en page avec tableau c'est le mal :mrgreen:
un p'tit tuto sur la chose http://www.alsacreations.com/tuto/lire/ ... leaux.html

@+

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 28 janv. 2014, 13:21
par S@ori
Ok.
ça me donne une nouvelle piste donc.

Par contre ce n'est pas vraiment possible de me passer de tableau.

Il y a un script php qui s'éxécute pour lancer des recherches dans la base de données.

Si vous voulez mieux comprendre je peux mettre une copie écran ?

Merci

Re: Problème d'affichage de mon site sur certains navigateur

Posté : 28 janv. 2014, 14:58
par moogli
je n'ai pas parlé de se passer de tableau.
J'ai parlé de ne pas utiliser les tableaux pour la mise en page du site et c'est totalement différents :)

Bien sur que la balise table a sa place dans une page web mais seulement pour afficher des données (par exemple image d'une ou plusieurs tables de SGBD).
Mais pour la mise en page c'est div / section / header / footer / nav etc

@+
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/