Bonjour,

Jusqu'a présent je codais en HTML 4.01 Transitional.
Je me suis mis au XHTML 1.0 Strict.

Et j'ai un problème que je ne comprend pas.

Pour pouvoir entourer une image avec un cadre, je rendais le conteneur flottant puis je mettais un padding de X pixels:

Conteneur img
{
border: solid 1px green;
float:left;
padding: 5px;
}


Celà marchait impeccablement. Mais si je déclare mon document en XHTML, il y a quelques pixels en plus entre le bas de l'image et le cadre. Je ne vois pas pourquoi.... Et ca n'est vraiment pas esthétique

Est-ce un problème connu?(google ne ma rien ramené...)
Merci
Modifié par KOre_TecHS (09 Dec 2007 - 16:31)
Bonjour,

Sans répondre à la question.
Pourquoi ne pas directement ajouter une bordure à l'image avec un padding à celle-ci ?

img {
border: 1px solid green;
padding: 5px;
}

Et hop ça fait un cadre tout beau.

Y'a t'il une raison quelconque à mettre le cadre flottant ?
Modifié par Sebastien D. (09 Dec 2007 - 16:53)
Administrateur
Bonjour,

pourrait-on avoir un exemple de code HTML (formaté à l'identique)?
As-tu enlevé le whitespace (les espaces, tabulations, retours chariot)?
Genre ça:
<div><img ... /></div>

et pas ça:
<div>
			<img ... />
	</div>

(1ère chose que j'enlève quand j'ai un souci avec IE6 et les images)
Ah oui d'ailleurs, tu ne précises pas dans quel navigateur? IE6? Smiley rolleyes
Oula je suis très bete...
Dans mon code je faisais en fait

Conteneur
{
border: solid 1px green;
float:left;
padding: 5px;
}


Le float me servait pour la mise en page par ailleurs. Et vu que je faisais porter la propriété sur le Conteneur et non sur l' "img" du conteneur, le float servait à ce que le cadre "colle" à l'image.(oui je fonctionne de façon assez expérimentale..... Smiley sweatdrop )

Enfin en gros je me suis un peu embrouillé entre les différentes versions de ma page, certaines avec "Container img" n'ayant pas les bonnes propriétées à l'intérieur et celles ayant les bonnes propriétés portaient uniquement sur le Conteneur...

Ca m'apprendre a etre rigoureux...

merci encore et désolé pour le dérangement
(Par contre j'aimerai bien comprendre pourquoi le comportement XHTML/HTML4.01 n'est pas le meme, meme si c'était mal utilisé dans mon cas, je vois pas pourquoi le rendu n'est pas le meme)

EDIT:
Pour répondre à Felipe: le code HTML:
<div class="Conteneur"><img alt="Yeux" src="Pics/EyEs.jpg"/></div>


Donc pas d'espace ni rien, et comportement identique sous FF et IE
Modifié par KOre_TecHS (09 Dec 2007 - 17:06)
a écrit :
Par contre j'aimerai bien comprendre pourquoi le comportement XHTML/HTML4.01 n'est pas le meme


Les navigateurs adaptent leur moteur de rendu en fonction du DOCTYPE de la page. En XHTML 1.0 Strict ils parsent la page avec le mode Standards tandis qu'en HTML 4.01 Transi avec URL, ils la parsent avec le mode Almost Standards Mode, où img devient un élément block.
Modifié par JyuniX (09 Dec 2007 - 17:46)
KOre_TecHS a écrit :

merci encore et désolé pour le dérangement

Pas de quoi.

KOre_TecHS a écrit :

(Par contre j'aimerai bien comprendre pourquoi le comportement XHTML/HTML4.01 n'est pas le meme, meme si c'était mal utilisé dans mon cas, je vois pas pourquoi le rendu n'est pas le meme)

A vrai dire là je ne vois pas trop pourquoi tu as cette réaction différente. Le comportement devrait-être le même. Je viens de reproduire la situation mais le problème n'est pas apparu. Tu n'aurais pas un exemple en ligne ? Ta page est bien valide ? Smiley langue
Modifié par Sebastien D. (09 Dec 2007 - 17:46)