Forum d'entraide PHPFrance

Bonjour !

Je rencontre actuellement un problème : je génère un album photo via un script PHP, mais l'affichage de ce dernier semble instable sous Firefox.

A vrai dire, l'affichage est généralement correct... Mais parfois une rubrique de mon album photo s'affiche mal. N'importe quelle rubrique, c'est aléatoire. Le code source de la page est correct (c'est bien le code que j'ai généré via mon script PHP), toutefois il semble être mal interprété.

Voici le résultat attendu :

Et voici comment, parfois, une de ces rubriques apparait "explosée" :

Voici la feuille de style externe qui gère tout cela :

Code : Tout sélectionner

#contenu {
margin-top:-2px;
padding:0 0 0 0}

.album ul,.album ol,.album li {list-style:none}

.album a {
color:#13C;
text-decoration:none}

.album a:hover,.album a:active,.album a:focus

.album p a {color:#17E}
.album p a:hover,p a:active,p a:focus {color:#4AF}

.album ol {
overflow:hidden;
margin:10px -25px 25px}

.album li {
float:left;
text-align:center}

.album li a {
color:#999;
width:188px;
height:190px;
display:block;
overflow:hidden;
padding-left:2px;
background:url(css_data/miniature.png);
font:italic 12px Georgia,Bookman,Palatino,"Times New Roman",serif}

.album li a:hover,.album li a:active,.album li a:focus {
color:#016;
padding:0 2px 0 0;
background-position:-190px 0}

.album li img {
display:block;
border:3px solid #EEE;
background:#EEE url(css_data/loading.gif) no-repeat 50% 50%}

css_data/loading.gif : image mise en fond, c'est un gif animé qui signifie que l'image est en cours de chargement.
miniature.png : c'est le cadre blanc que l'on voit autour des photos, et qui devient bleu au survol de la souris (la première moitié de l'image est blanche, la seconde moitié est bleue)

Et voici ma structure HTML générée par mon script PHP :

Code : Tout sélectionner

<!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>                                                                       
           <TITLE>Visionneuse de photos de famille</TITLE>                                        
                 <META http-equiv="Content-Type" Content="text/html; charset=ISO-8859-1">         
                 <link rel="shortcut icon" type="image/x-icon" href="css_data/icone.ico">  

                 <style>                                                                
                        html, body                                                      
                        {                                                               
                         height:100%;                                                   
                        }                                                               
                 </style>                                                               

                 <LINK rel="stylesheet" type="text/css" href="style.css">         
                 <LINK rel="stylesheet" type="text/css" href="album.css">         
                 <LINK rel="stylesheet" type="text/css" href="apercus.css">             

                 <script type="text/javascript">                                      
                     [...]
                 </script>
           </HEAD>                                                                      
           <BODY>
                <FORM name="formulaire_choix_menu" action="#SELF" method="post">
                     [...]        
                </FORM>
    
                [...]
   
                <DIV id="contenu" class="album">
                   <ol>

                      <li>
                        <A onclick="changer_rubrique('06_12_2007 - Eliott')" >
                          <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >(06 décembre 2007)</DIV>

                          <IMG width="100" height="75" src="photos/06_12_2007 - Eliott/petites/IMG_4884_cKtsWK7BnJBzm0dqNwZ.jpg" style="margin-left:41px; margin-top:4.5px" />
                          <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >Eliott</DIV>
                        </A>
                      </li>
                    
                      [...]

                      <li>
                        <A onclick="changer_rubrique('Appartement de Biarritz')" >
                          <IMG width="100" height="75" src="photos/Appartement de Biarritz/petites/photo_16.jpg" style="margin-left:41px; margin-top:45.5px" />
                          <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >Appartement de Biarritz</DIV>
                        </A>
                      </li>
                    
                  </ol>
                </DIV>     
           </BODY>
        </HTML>

Il s'agit donc d'une série de <LI> qui correspondent aux rubriques sus-citées.

Voici un morceau du code source HTML réelement généré (clic-droit->afficher la source) :

Code : Tout sélectionner

      <li>
         <A onclick="changer_rubrique('02_03_2007 - Guillaume a la guitare')" >
            <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >(02 mars 2007)</DIV>
            <IMG width="100" height="75" src="photos/02_03_2007 - Guillaume a la guitare/petites/IMG_0211.jpg" style="margin-left:41px; margin-top:4.5px" />
            <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >Guillaume a la guitare</DIV>
         </A>
      </li>
                    
      <li>
         <A onclick="changer_rubrique('25_12_2006 - Noel a Biarritz')" >
            <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >(25 décembre 2006)</DIV>
            <IMG width="100" height="75" src="photos/25_12_2006 - Noel a Biarritz/petites/IMG_0180.jpg" style="margin-left:41px; margin-top:4.5px" />
            <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >Noel a Biarritz</DIV>
         </A>
      </li>
                    
      <li>
         <A onclick="changer_rubrique('04_11_2006 - Elliot et Sarah a Biarritz')" >
            <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >(04 novembre 2006)</DIV>
            <IMG width="100" height="75" src="photos/04_11_2006 - Elliot et Sarah a Biarritz/petites/IMG_0110.jpg" style="margin-left:41px; margin-top:4.5px" />
            <DIV style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;" >Elliot et Sarah a Biarritz</DIV>
         </A>
      </li>

Et voici comment Firefox - parfois - interprète ce même morceau de code source :

Code : Tout sélectionner

      <li>
         <a onclick="changer_rubrique('02_03_2007 - Guillaume a la guitare')">
            <div style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;">(02 mars 2007)</div>
            <img width="100" height="75" style="margin-left: 41px; margin-top: 4.5px;" src="photos/02_03_2007 - Guillaume a la guitare/petites/IMG_0211.jpg"/>
            <div style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;">Guillaume a la guitare</div>
         </a>
      </li>

      <li>
         <a onclick="changer_rubrique('25_12_2006 - Noel a Biarritz')">
            <div style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;">(25 décembre 2006)</div>
            <img width="100" height="75" style="margin-left: 41px; margin-top: 4.5px;" src="photos/25_12_2006 - Noel a Biarritz/petites/IMG_0180.jpg"/>
            <div style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;">Noel a Biarritz</div>
         </a>
      </li>

      <li>
         <a onclick="changer_rubrique('04_11_2006 - Elliot et Sarah a Biarritz')"/>
         <div style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;">
            <a onclick="changer_rubrique('04_11_2006 - Elliot et Sarah a Biarritz')">(04 novembre 2006)</a>
         </div>
         <a onclick="changer_rubrique('04_11_2006 - Elliot et Sarah a Biarritz')">
            <img width="100" height="75" style="margin-left: 41px; margin-top: 4.5px;" src="photos/04_11_2006 - Elliot et Sarah a Biarritz/petites/IMG_0110.jpg"/>
         </a>
         <div style="margin-top: 6px; padding-top: 12px; padding-bottom: 12px;">
            <a onclick="changer_rubrique('04_11_2006 - Elliot et Sarah a Biarritz')">Elliot et Sarah a Biarritz</a>
         </div>
         <a onclick="changer_rubrique('04_11_2006 - Elliot et Sarah a Biarritz')"/>
      </li>

Comme vous pouvez le constater, une partie du style est donc écrite dans la feuille de style CSS.
Une autre partie du style, relative au positionnement de l'image, est écrite directement dans la balise <IMG />.

Le code source est donc correct, mais mal interprété par le navigateur, qui le déforme alors.

Ce qui me perturbe, c'est que ce problème d'interprétation du code :
- survient avec Firefox (dernière version) de façon aléatoire
- ne survient pas avec Internet Explorer 6.0

N'étant pas très bienfamiliarisé avec le CSS, je remets en doute mon code. Qu'en pensez-vous ?

EDITION : condensé des posts de réponse :
- En changeant l'en-tête XHTML pour du strict, le problème persiste.
- En retirant les marges négatives de la feuille de style, le problème persiste.
- En retirant les attributs "style" des balises <DIV> et <IMG>, le problème persiste.
- En modifiant les paramètres de Firefox network.http.pipelining et network.http.proxy.pipelining pour leur mettre la valeur "true", le problème persiste
- Sur un autre ordinateur, avec Firefox 2.0.0.6, le problème persiste.

Bonjour Nyphel,

Qu'est-ce que ça donne avec un autre doctype ?

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Malheureusement le résultat est exactement le même.
Bien que la mise en page varie un peu, certaines rubriques se font encore "exploser" de façon aléatoire.

Et qu'est-ce que ça donne si tu supprimes les marges négatives ?

Le résultat demeure inchangé

En retirant les attributs "style" de mes balises <div> et <img>, ca ne résoud rien non plus...

As-tu pu tester l'affichage de ton site avec Firefox depuis un autre PC ?

Sinon, c'est peut-être un basique pb d'affichage sous Firefox (qui, contrairement à IE n'attend pas que la page soit entièrement chargée pour l'afficher). Au cas où, essaye cette manip' pour accélérer Firefox :

Lancer Firefox
Taper dans la barre d'adresse : about:config
Recherche les entrées network.http.pipelining et network.http.proxy.pipelining et met les valeurs à TRUE (clic-droit sur la ligne et choisit Inverser)
Ferme et relance Firefox

Merci pour la manip, toutefois le problème persiste encore...

Sur un autre ordinateur, avec Firefox version 2.0.0.6, le problème persiste.

Est-ce que tu pourrais mettre un lien vers la page pour qu'on puisse jeter un œ stp ? Ou au pire une version condensée que l'on pourrait copier/coller à partir du forum (sans éléments externes).

Est-ce que tu as essayé d'inspecter le HTML avec la Web Developer toolber de Firefox ou Firebug ?

Autre chose, ton code ne me semble pas valide. Par exemple, tes liens <a> ne doivent pas contenir de bloc <div>.

Pour le moment je ne peux pas mettre de lien, car c'est une zone à accès privé avec un millier de photos/vidéos privées.

Par contre j'ai bien contrôlé la page avec la Firefox Web Developer toolbar.
C'est ainsi qe j'ai pu donner les éléments dans les précédents posts, et différencier le code source de la page du code source après interprétation.

Je ne savais pas qu'un lien <A> ne devait pas contenir de <DIV>... Et c'est probablement de là que viens tout le problème. Je vais me pencher sur cela ce soir, mais du coup je ne vois pas comment faire en sorte que tout mon bloc soit un lien...

En effet, pour chaque rubrique j'affiche :
- une image de fond
- la date de la rubrique (div)
- une image de cette rubrique (img)
- le nom de cette rubrique (div)
Est-il possible que tout cela, uniformément, soit un lien ?

Met ton evenement onclick sur le div ou sur l'image.

Je ne savais pas qu'un lien <A> ne devait pas contenir de <DIV>...

Un élément en ligne (comme a) ne peut pas contenir d'éléments de bloc (comme div). Pour le cas où tu ne saurais ce qu'est un bloc ou un élément en ligne, lis ce tutorial d'Alsacréations, ainsi que ce billet du blog d'Alsacréations.

En outre, le nom des balises et des attributs doit être en minuscules en XHTML (en HTML, il y a une insensibilité à la casse). Or, ton code utilise une DTD XHTML tout en ayant des noms de balise écrits en majuscules. Cet autre tutorial d'Alsacréations te sera aussi utile sur ce point.

Je vous remercie encore une fois pour votre aide précieuse, vos réponses rapides claires précis argumentées et documentées

Une fois mon code corrigé, et conforme à la norme XHTML, tout fonctionne parfaitement !

Une fois mon code corrigé, et conforme à la norme XHTML, tout fonctionne parfaitement !

yay

Une fois mon code corrigé, et conforme à la norme XHTML, tout fonctionne parfaitement !

Dans ce cas, n'oublie pas d'ajouter le tag "Résolu" en éditant le premier message de ce sujet.

Forum d'entraide PHPFrance

CSS : doutes concernant ma feuille de style

CSS : doutes concernant ma feuille de style