28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voici mon problème, en images. Voici un premier code :

<div style="height: 20px;">
	<img src="/medias/btn_accueil.png" /><img src="/medias/btn_presentation.png" />
</div>
<div style="background-color: #F8C262">
	&nbsp;
</div>

Jusque là tout va bien. Mes images s'affichent correctement, même lorsque je zomme (ctrl+ avec FF). Voici ce que ça donne:
http://www.puissance-info.com/img1.png

Et voici un 2e code. Tout est strictement identique, mis à part que je suis passé à à la ligne entre mes deux balises <img> :

<div style="height: 20px;">
	<img src="/medias/btn_accueil.png" />
	<img src="/medias/btn_presentation.png" />
</div>
<div style="background-color: #F8C262">
	&nbsp;
</div>

Et là, c'est le drame... Lorsque je veux zoomer, mes images se déplacent :
http://www.puissance-info.com/img2.png

Il semblerait que ce problème vienne d'un espace insécable qui est ajouté automatiquement entre les deux images, lorsque les deux balises <img> ne sont pas sur la même ligne (j'ai fait exprès de zoomer ennormément et de le surligner sur le screenshot, pour bien voir de quoi je parle) ... Mais impossible de le supprimer, ou de modifier sa hauteur...

Quelqu'un pourrait-il m'expliquer comment empêcher ce "bug" ? :S
Modifié par Helldream (08 Oct 2007 - 22:05)
Plop,

J'parie que tu teste ça sous IE6 ? ^^
J'ai déjà eu ce problème, et la solution est dans ton post, supprimer l'espace entre tes images, tout simplement.
Salut,

Le soucis est qu'il n'y a pas d'espace entre mes images, dans mon code... J'ai trouvé une solution possible : ajouter overflow: hidden; à #menu_haut, et vertical-align:top; à #menu_haut img. Je ne suis pas certain que ce soit la meilleure, mais au moins c'est fonctionnel ^^.

En tous cas merci de ta réponse Smiley cligne

PS : non je teste surtout sur FF, mais aussi sous IE6 et 7, en effet Smiley cligne