Bug affichage image Firefox

Totty
Les bases HTML/CSS

Bonsoir,

J'ai une image dont j'ai ajusté la taille en CSS et sous google chrome elle s'affiche correctement. Mais sous firefox on dirait qu'elle ne prend pas en compte les tailles que j'ai définit et ça déforme les pages.

Pouvez-vous m'aider ? Merci d'avance.

6 réponses

SnoT

Peux tu copier/coller ton CSS stp :)

Totty
Auteur 
div{
    text-align:center;
    background-size: cover;
    }
h1{
    font-family:Arial,Verdana;
    text-align: left;
    font-size: 160%;
}
/* Polices des liens */
a {
    font-family: fantasy;
    text-decoration:none;
    font-family:Arial,Verdana;
    color: #046380;
}
/* Corp de la page */
body{
    color: #8E3557;
    background-image: url(../Images/gris.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-size: 96% ;
}
/*Lorsque que la souris est sur le lien*/
a:hover {
    color:#8E3557;
    font-size: 20px;

}
/*Lorsque que le lien a été visité*/
a:visited {
    color: #8E3557;

}   
/* Menu avec toutes les communes */
.menuCommune{
    float:left;
    width:320px;
    height:470px;
    text-align: justify;
    padding-bottom: 0;
}
/* Carte à la page d'accueil */
.carteCUB{

    max-width: 100%;
    max-height: 70%;
    background-size: cover;
    }

/* Photo de la commune sélectionnée */
.photo{
    max-width: 20%;
    float: right;
    margin: auto;
}
/* Tableau contenant les informations de la commune sélectionnée */ 
table{
    table-layout: fixed;
    text-align: justify;
}
/* Colonne du tableau */
td{
    width: 25%;
    vertical-align: top;
    word-break: normal;
}
/* Classe pour les rubriques sports, cultures et loisirs et actualité*/
.titre{
    text-align: center;
    font-weight: bold;
}
/* En-tête */
.header{
    margin:0;
    padding:0;
    background-size: cover;
    width: 100%;
    height: 35%;
}
/* Carte affichant la position de la commune sélectionnée */
.carte{
    max-width:100%;
    float: left;
    margin: auto; 
}
/* Titre des pages: Les communes de la CUB */
.titrepage{
    font-size: 30px;   
}
SnoT

Et ton HTML, et me dire quelle déclaration dans ton CSS est celle qui concerne ton image :)

Totty
Auteur

code html :

?php
//Connexion ‡ la base de donnÈes
INCLUDE "connexion.php"
?>
<!DOCTYPE>
<html>
    <head>
        <link rel=stylesheet href="CSS/feuille.css" type="text/css">
            <title> Accueil </title>    
    </head>
    <body>
         <div class=titrepage>Les communes de la CUB<br/><img class="header" src="Images/image_header.jpg" /></div>

        <!--Menu de sÈlection des communes-->     
          <div class=menuCommune>
      <h1>Choix d'une commune</h1>

      <form action=communes.php method=GET>
           <?php
           //RequÍte remplissant le menu ‡ partir de la base de donnÈes
           $query2="Select id, nom From communes;";
           $result2=mysql_query($query2);
           while($ligne=mysql_fetch_array($result2))
           {
           ?>
        <a href=communes.php?commune=<?php echo $ligne'id'] ?>><?php echo $ligne'nom'] ?></a><br/>      
           <?php
           }
           ?>

          </div>
        <div>
        <!--Images rÈprÈsentant toutes les communes de la CUB-->
        <br/>
        <img src="Images/carteCUB.png" class="carteCUB" />
        </div>
        </body>
</html>

c'est la carte "carteCUB.png" avec la class="carteCUB" dans le CSS.

SnoT

Tu as mis un max-width et max-height pourquoi ne pas utiliser width et height ?

pou4ever

Oubli pas de vérifier ton $ligne'id'] sinon tu risque une injection ;)