[Résolu] Pb de hauteur fixée d'un div (IE) dû à un espace dans le HTM

Bonjour,
Il ne s'agit pas là d'une question que je viens poser, mais plutôt d'une solution que je viens donner.

Voici le pb.
Dans ma page, j'ai un bandeau qui contient une image de taille fixe 594 x 120 px. J'ai affecté ces valeurs à mon bloc et inséré dans ma page html mon image.

Voici les codes :
=> le css

 
 #img {
  float:right;
  margin:0;
  padding:0;
  display: inline;
  width:594px;
  height:120px;
  background-color:#ff0000;
 }  

=> le HTML

 
  <div id="swf"> <img src="img/terrain.jpg" alt="mon image" width="594" height="120" /> 
  </div> 

Sous firefox tout fonctionne bien, mais sous IE, il apparait que mon calque est plus grand que prévu. Or malgré un padding et un margin à 0, rien ne change !
Après pas mal d'heure de recherche à essayer de trouver la petite bête, je l'ai enfin trouvé !!!!

Elle se cachait dans le code HTML. Il ne fallait pas écrire cela :

  <div id="img"> <img src="img/terrain.jpg" alt="mon image" width="594" height="120" /> 
  </div> 

Mais cela : <div id="img"> <img src="img/terrain.jpg" alt="mon image" width="594" height="120" /></div>[code]


Eh oui, il y avait un espace après l'insertion de l'image et la balise de fermeture de mon bloc et IE l'interprétait comme une nouvelle ligne et allongeait donc mon bloc en conséquence.

Alors, si je n'avais qu'un conseil, c'est que lorsqu'il y a un bug, c'est de commencer par vérifier les syntaxe de vos html et css et d'enlever les espaces inutiles...
Modifié par Cygnus (15 Jan 2006 - 22:46)