taille d'image différente sur firefox

Version imprimable

bonjour,

sur chrome j'ai mon site qui fonctionne bien

site

pourtant sur firefox, les images du milieu sont immenses, et je ne sais pas comment les rétablir à la bonne taille.

Comment puis je faire s'il vous plais ?

je vous remercie

Code:

1
2
3
4
5
6
7
8
9
10
11
    <div class="box">
    <div class="vignette">
            <p><a>Découvrez notre centre de soins</a></p>
            <p style="width:178px;
            padding-right:25px;
           "><img style="padding-top:26px;" src="http://cerclehippiquechoukasserie.com/data/images/vignette1.png" alt="choukasserie care"></p>
            <p
            style="border-left:1px white solid; padding-left:25px;"><a>Découvrez notre centre équestre</a></p>
            <p><img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval"></p>
          </div>
       </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.box{
   width:1300px;
  vertical-align:middle;
  display:inline-block;
  line-height:1.2; 
   border-left:3px rgba(44,80,34,1) solid;
border-right:3px rgba(44,80,34,1) solid;
border-bottom:3px rgba(44,80,34,1) solid;
padding:10px 20px;
}
 
.vignette { 
  display:table; 
  border-collapse:collapsed;
 
}
.vignette p {
  display: table-cell;
  vertical-align: middle;
      width:130px;
}
.vignette a{
	color: white;
}
 
.vignette a:hover{
	color: #D1B561;
}
 
 
.vignette a, .vignette img{
   display: block;
   border-radius:8px;
 
}

J'ai deux solutions :

> SOLUTION I

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    <div class="box">
    <div class="vignette">
            <p><a>Découvrez notre centre de soins</a></p>
 
            <p style="padding-right:25px;">
              <img style="padding-top:26px; width:178px;" src="http://cerclehippiquechoukasserie.com/data/images/vignette1.png" alt="choukasserie care" />
              </p>
 
              <p style="border-left:1px white solid; padding-left:25px;">
                <a>Découvrez notre centre équestre</a>
              </p>
            <p>
              <img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval" />
              </p>
          </div>
       </div>

- Suppression du width:178px sur le <p>
- Rajout du width:178px sur <img>

> SOLUTION II
- Ou alors redimensionner ton image au même format que la seconde ^^

Ce ne sont peut-être pas les meilleures solutions, mais ça marche :)

Et pour tes images, pense à fermer les balises :

Mauvais

Code:

1
2
 
<img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval">

Correct

Code:

1
2
 
<img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval" />

02/10/2013, 15h08
Bovino

Citation:

Et pour tes images, pense à fermer les balises

Ca dépend. ;)
En HTML, il n'est pas nécessaire de fermer toutes les balises, donc dans ce cas,

Code:

<img alt="..." src="...">

est suffisant.
En xhtml, il faut obligatoirement fermer toutes les balises (y compris les balises autofermantes comme les images), donc

Code:

<img alt="..." src="..." />

est obligatoire.
HTML5 accepte aussi bien la syntaxe HTML que xhtml. ;)
02/10/2013, 15h13
mangasource

Ah, je croyais pourtant .. Faut que je revois mes bases tiens !
Merci pour l'info ;)
02/10/2013, 15h18
ickyknox

parfait ! merci beaucoup, c'est corrigé :mouarf::mouarf::mouarf: