28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problême d'affichage de liste sous Firefox

Bonjour,

J'ai un problême sous Firefox, il ne veut pas remplacer les puces des listes par une image que j'ai choisi au format GIF.

Il y a 3 fichiers :
2 feuilles de style (historique.css et mater.css) et
1 page HTML (info.html).

Voici le code de la feuille de style nommée historique.css :

LI {list-style-image:url(../images/point.gif)}

.intitule1 {
            font-family: Arial;
            font-size:12px;
            COLOR: #000000;
           }
.donnee1 {
          font-family: Arial;
          font-size:8px;
          COLOR: #0000FF;
         }
.texte1 {
         font-family: Arial;
         font-size:8px;
         COLOR: #000000;
        }
.titre1 {
         font-family: Arial;
         font-size:10px;
         COLOR: #000000;
        }
.alerte1 {
          font-family: Arial;
          font-size:8px;
          COLOR: #FF0000;
         }
.intitule2 {
            font-family: Arial;
            font-size:14px;
            COLOR: #000000;
           }
.donnee2 {
          font-family: Arial;
          font-size:10px;
          COLOR: #0000FF;
         }
.texte2 {
         font-family: Arial;
         font-size:10px;
         COLOR: #000000;
        }
.titre2 {
         font-family: Arial;
         font-size:12px;
         COLOR: #000000;
        }
.alerte2 {
          font-family: Arial;
          font-size:10px;
          COLOR: #FF0000;
         }
.intitule3 {
            font-family: Arial;
            font-size:16px;
            COLOR: #000000;
           }
.donnee3 {
          font-family: Arial;
          font-size:12px;
          COLOR: #0000FF;
         }
.texte3 {
         font-family: Arial;
         font-size:12px;
         COLOR: #000000;
        }
.titre3 {
         font-family: Arial;
         font-size:14px;
         COLOR: #000000;
        }
.alerte3 {
          font-family: Arial;
          font-size:12px;
          COLOR: #FF0000;
         }


Voici le code de la feuille de style nommée mater.css :


.selection {
            background-color: #00FFFF;
           }
.autre {
       }
.erreur {
         background-color: #FF0000;
        }
.erreur_texte {
               FONT-WEIGHT: bold;
               COLOR: #FF0000;
              }
.desactive {
            background-color: #DCDCDC;
           }
.TabCommon {
            font-family: Ms sans serif;
            font-size:8px;
            COLOR: #969696;
            PADDING: 5px;
            TEXT-ALIGN: center;
            HEIGHT: 25px;
           }
.TabContent {
             PADDING: 1px;
            }
.TabContentBottom {
                   PADDING: 1px;
                   BORDER-BOTTOM: 2px outset #000000;
                  }
.TabOffPrem {
             CURSOR: hand;
             BORDER-TOP: 2px outset #FFFFFF;
             BACKGROUND-COLOR: #D8D8D8;
             BORDER-LEFT: 2px outset #FFFFFF;
             BORDER-RIGHT: 1px solid #000000;
            }
.TabOff {
         CURSOR: hand;
         BORDER-TOP: 2px outset #FFFFFF;
         BACKGROUND-COLOR: #D8D8D8;
         BORDER-LEFT: 1px solid #FFFFFF;
         BORDER-RIGHT: 1px solid #000000;
        }
.TabOn {
        FONT-WEIGHT: bold;
        CURSOR: default;
        BORDER-TOP: 2px outset #FFFFFF;
        COLOR: #000000;
       }
.TabBorderBottom {
                  BORDER-BOTTOM: 2px inset #FFFFFF;
                 }
.TabActiveBorderLeftRight {
                           BORDER-RIGHT: 2px outset #000000;
                           BORDER-LEFT: 2px outset #FFFFFF;
                          }
.TabActiveBackground {
                      BACKGROUND-COLOR: #DCDCDC;
                     }
.Ligne1{
        BACKGROUND-COLOR: #FFFFE1;
        HEIGHT: 15px;
       }
       
.Ligne2{
        BACKGROUND-COLOR: #FFFFCE;
        HEIGHT: 15px;
       }

.Ligne3{
        BACKGROUND-COLOR: #F0F0F0;
       }

.Ligne4{
        BACKGROUND-COLOR: #DFF9FD;
        HEIGHT: 15px;
       }

.Ligne5{
        BACKGROUND-COLOR: #B7EFF9;
        HEIGHT: 15px;
       }

.TitreListe{
            BACKGROUND-COLOR: #D8D8D8;
           }
.cache {
        position:absolute; top:200px; z-index:10; visibility:hidden;
       }


Et voici le code de la page nommée info.html :


<html>
 <head>
   <title>QSP Maternit&eacute; - Consultation postnatale - informations d&eacute;taill&eacute;es </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <link rel="stylesheet" type="text/css" href="../../inc/mater.css"  />
    <link rel="stylesheet" type="text/css" href="../../inc/historique.css" />
 </head>
<body bgcolor="#FFFFE1">
 <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
     <td width="100%" height="50" align="center" valign="middle" colspan="2">
    <br>
    </td>
   </tr>
   <tr>
    <td width="100%"  align="center" valign="top" >
     <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr>
       <td width="93%" valign="top" class="Ligne1">
        <ul>
         <li>
          <font class="texte2">Date de consultation : </font>
          <font class="donnee2">13 septembre 2005</font>
          <font class="texte2">.</font>
          <br/>
         </li>        
         <li>
          <font class="texte2">Présence de l'enfant : </font>
          <font class="donnee2">oui</font>
          <font class="texte2">.</font>
          <br/>
         </li>
         <li>
          <font class="texte2">La patiente est </font>
          <font class="donnee2">totalement satisfaite</font>
          <font class="texte2"> vis à vis des conditions de naissance de son bébé.</font>
          <br/>
         </li>
         <li>
          <font class="texte2">Retour de couches : </font>
          <font class="donnee2">11 novembre 2005</font>
          <font class="texte2">.</font>
          <br/>
         </li>       
        </ul>
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</body>
</html>


Les 3 fichiers se trouvent respectivement à ces 3 emplacements :
/inc/historique.css
/inc/mater.css
/conspost/vue/info.html

J'ai donné toutes ces infos car je ne sais pas trés bien d'où vient le problême. Smiley smile

Cà fonctionne donc sous IE et Opera.
Et pas sous Firefox !!! Smiley eek
C'est la première fois, d'habitude c'est le contraire.

Pour info :
- j'ai déjà vidé le cache de Firefox donc ce n'est pas un problême du cache du navigateur.
- Les chemins relatifs sont corrects, même pour la localisation de l'image.

Merci d'avance, celui qui trouvera sera trés fort.

NB : Faudra peut-être un jour que je me mette au XHTML.
Modifié par Darky (04 Apr 2005 - 16:13)
utilise plutôt :
list-style-type: none;
background: url(...) 2px 2px no-repeat;

Modifié par anthony (04 Apr 2005 - 14:50)
C'est trés audacieux comme solution. Smiley cligne

Merci beaucoup.

Malheureusement, celà ne fonctionne toujours pas sous Firefox, comme si le navigateur occultait cette instruction de la feuille de style.

Je me demande si il n'y a pas un paramétrage à faire dans le navigateur !

La solution que tu m'as soumis met l'image sur le texte de chaque ligne sous IE mais celà me donne une piste pour continuer... Merci encore. Smiley ravi
après il faut positionner l'image avec padding et background-position;

un exemple:


<style rel="stylesheet" type="text/css">
#liste {
list-style:none;
margin:0;
padding:0;
}
#liste li {
background-image:url(../images/point.gif);
background-repeat:no-repeat;
padding-left:10px;
background-position: 0 .5em;
}
</style>
  </head>
  <body>
<ul id="liste">
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
</ul>
  </body>
</html>

Modifié par alex_br (04 Apr 2005 - 15:10)
alex_br a écrit :
après il faut positionner l'image avec padding et background-position;

mon 2px 2px compte donc pour du beurre Smiley lol
J'ai trouvé d'où viens le problême :
En fait, dans mon entreprise, on passe par un proxy muni d'un cache.
Firefox, n'allait pas chercher les bons fichiers sur le serveur Apache !!!
Il les téléchargait à partir du cache du proxy parce que la fonction bypass (des adresses locales) de Firefox ne fonctionnait pas.
Quelle merde ces satanés proxy-cache!! Smiley fache

Merci beaucoup pour vos aides conjointes, celà n'a pas été vain, j'ai appris une nouvelle façon de réprésenter des listes... Smiley smile
Sujet clos
Aller à