CSS/xHTML - image dans div, marge en bas impossible à réduire ?

Olivier Miakinen

01/12/2009 à 13:11

Le 01/12/2009 12:26, Nikita Calvus-Mons a écrit :

Une image est dans un div flottant, avec une bordure.

Malgré padding à 0 dans la classe CSS du div, celui-ci est légèrement
plus haut que l'image, et il en résulte une marge de 3 ou 4 pixels en
bas, très laide.

C'est au dessus de l'image que tu as une marge ? En dessous, j'aurais
parié pour le positionnement de l'image par rapport au « baseline » du
texte, mais là je ne sais pas.

Enfin, à tout hasard, essaye ceci :

img { display: block; }

Tu peux bien sûr spécialiser :

.image_droite img { display: block; }

Nikita Calvus-Mons

01/12/2009 à 13:37

Olivier Miakinen a écrit :

Le 01/12/2009 12:26, Nikita Calvus-Mons a écrit :
Une image est dans un div flottant, avec une bordure.

Malgré padding à 0 dans la classe CSS du div, celui-ci est légèrement
plus haut que l'image, et il en résulte une marge de 3 ou 4 pixels en
bas, très laide.

C'est au dessus de l'image que tu as une marge ? En dessous, j'aurais
parié pour le positionnement de l'image par rapport au « baseline » du
texte, mais là je ne sais pas.

Non, en dessous en effet.

En fait, j'ai sorti le "border: 1px;" de la déclaration du div, et ne
l'ai mis que pour les img de ce div, avec ".image_droite img {}". It works.

En fait c'est apparemment connu comme truc. Ca le fait dans les cellules
de tableaux et dans les div, en effet c'est lié à la baseline. Le truc
consiste donc à ne pas mettre la border au div, puisque celui-ci se
réserve quelques pixels en dessous. La border est sur l'img !

Là, je galère pour essayer dans la même feuille de style de donner des
directives de largeur différentes pour IE. J'ai essayé un truc avec :

width: 200px !important;
width: 184px; /* IE */

mais ça ne fonctionne pas. Et ça n'a pas l'air très élégant, surtout
(comme ma page passe avec succès les deux validations xHTML/CSS,
maintenant, je fais le malin ;-)).

IE doit interpréter le !important, en fait, maintenant ?

Une idée, à part faire une autre CSS pour IE (ce que je ferai, si
besoin, of course) ?

Merci à toi,

N.

SAM

01/12/2009 à 14:10

Le 12/1/09 12:26 PM, Nikita Calvus-Mons a écrit :

Bonjour,

Une image est dans un div flottant, avec une bordure.

Malgré padding à 0 dans la classe CSS du div, celui-ci est légèrement
plus haut que l'image, et il en résulte une marge de 3 ou 4 pixels en
bas, très laide.

J'avais déjà remarqué ça ailleurs sans y prêter attention.

Code CSS :

.image_droite {
float: right;
margin-left: 15px;
margin-bottom: 5px;
padding: 0;
border: 1px solid;
width: auto;
}

Code xHTML :

<div class="image_droite">

<img width="234" height="289"
src="http://grossagouin.viabloga.com/images/mcenroe.jpg" alt="McEnroe" />

</div>

Si vous avez une idée...

Déjà, les navigateurs rajoutent un node-texte pour les espaces entre
balises.
(mais ça n'a pas l'air d'être le problème)

On n'a pas le phénomène :
- avec IE 6 et 7 (8... à voir)
- avec Fx.3, Safari.4, Opera.9
si ... on abandonne les doctypes "strict"

Tester en barre de navigateur (copier-remplacer et return)
(avec différents doc-types)

javascript:d=document.getElementById('image_droite'),
e1=d.firstChild,
e2=d.lastChild,
ig=d.getElementsByTagName('img')[0],
H=(d.offsetHeight-2)*1,
h=ig.height*1;
n=H-h;
alert('premier enfant = '+e1+
'ndernier enfant 2 = '+e2+
'nimage = '+ig+
'nmarge basse = '+n
);

Du temps de NC4 on avait ce pb avec les images
qu'on résolvait alors en supprimant les espaces entre balises.

De nos jours (standards aidant ?) ça ne fonctionne plus, tt au moins
dans mes tests et en strict.

--
sm

Nikita Calvus-Mons

01/12/2009 à 14:17

SAM a écrit :

Déjà, les navigateurs rajoutent un node-texte pour les espaces entre
balises.
(mais ça n'a pas l'air d'être le problème)

On n'a pas le phénomène :
- avec IE 6 et 7 (8... à voir)

Si, je l'avais aussi sur IE7. Mais c'est réglé assez simplement en
mettant le border à img, et non au div contenant l'img.

N.

SAM

01/12/2009 à 14:46

Le 12/1/09 1:37 PM, Nikita Calvus-Mons a écrit :

Le truc
consiste donc à ne pas mettre la border au div, puisque celui-ci se
réserve quelques pixels en dessous. La border est sur l'img !

.image_droite {
float: right;
margin: 0;
padding: 0;
margin-left: 15px;
margin-bottom: 5px;
}
.image_droite img {
margin: 0;
padding: 5px;
background: white;
border: 1px solid black;
}

Indépendamment de cet effet de présentation, j'ai toujours les 4px
supplémentaires en strict.
Néanmoins l'avantage de cette séparation fait que le div s'auto-marge
négativement de ces 4px.
Ça se voit si on a installé l'extension Web Developper dans Fx
et qu'on lui demande d'entourer les blocks.

Même combat avec :

.image_droite {
float: right;
margin: 0;
padding: 0;
}
.image_droite img {
margin: 0;
margin-left: 15px;
margin-bottom: 5px;
padding: 5px; /* padding à 0 ne résoud rien */
background: white;
border: 1px solid black;
}

L'important est de ne pas mettre de bordure au div.

Là, je galère pour essayer dans la même feuille de style de donner des
directives de largeur différentes pour IE. J'ai essayé un truc avec :

à propos de quoi ces largeurs ?

width: 200px !important;
width: 184px; /* IE */

Le hack pour IE ( <7 ?)

_width: 184px;

ou :

width: 184px; /* pour IE */
/* hack IE */
width: 200px; /* navigateurs "normaux" */
/* fin hack */

mais ça ne fonctionne pas. Et ça n'a pas l'air très élégant, surtout
(comme ma page passe avec succès les deux validations xHTML/CSS,
maintenant, je fais le malin ;-)).

Le truc : _ + règle ne doit pas être apprécié du validateur.

Pour IE, le plus simple ( ? ! ? !) ce sont les commentaires
conditionnels. C'est M$ qui le dit lui-même, c'est dire !
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx#UsingCCs>
<http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx>

Une idée, à part faire une autre CSS pour IE (ce que je ferai, si
besoin, of course) ?

Ha! Bon! Ben ? tu connais alors le coup des commentaires.

--
sm

Le 12/1/09 1:37 PM, Nikita Calvus-Mons a écrit :

Le truc
consiste donc à ne pas mettre la border au div, puisque celui-ci se
réserve quelques pixels en dessous. La border est sur l'img !

.image_droite {
float: right;
margin: 0;
padding: 0;
margin-left: 15px;
margin-bottom: 5px;
}
.image_droite img {
margin: 0;
padding: 5px;
background: white;
border: 1px solid black;
}

Indépendamment de cet effet de présentation, j'ai toujours les 4px
supplémentaires en strict.
Néanmoins l'avantage de cette séparation fait que le div s'auto-marge
négativement de ces 4px.
Ça se voit si on a installé l'extension Web Developper dans Fx
et qu'on lui demande d'entourer les blocks.

Même combat avec :

.image_droite {
float: right;
margin: 0;
padding: 0;
}
.image_droite img {
margin: 0;
margin-left: 15px;
margin-bottom: 5px;
padding: 5px; /* padding à 0 ne résoud rien */
background: white;
border: 1px solid black;
}

L'important est de ne pas mettre de bordure au div.

Là, je galère pour essayer dans la même feuille de style de donner des
directives de largeur différentes pour IE. J'ai essayé un truc avec :

à propos de quoi ces largeurs ?

width: 200px !important;
width: 184px; /* IE */

Le hack pour IE ( <7 ?)

_width: 184px;

ou :

width: 184px; /* pour IE */
/* hack IE */
width: 200px; /* navigateurs "normaux" */
/* fin hack */

mais ça ne fonctionne pas. Et ça n'a pas l'air très élégant, surtout
(comme ma page passe avec succès les deux validations xHTML/CSS,
maintenant, je fais le malin ;-)).

Le truc : _ + règle ne doit pas être apprécié du validateur.

Pour IE, le plus simple ( ? ! ? !) ce sont les commentaires
conditionnels. C'est M$ qui le dit lui-même, c'est dire !
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx#UsingCCs>
<http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx>

Une idée, à part faire une autre CSS pour IE (ce que je ferai, si
besoin, of course) ?

Ha! Bon! Ben ? tu connais alors le coup des commentaires.

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

Le 12/1/09 1:37 PM, Nikita Calvus-Mons a écrit :

Le truc
consiste donc à ne pas mettre la border au div, puisque celui-ci se
réserve quelques pixels en dessous. La border est sur l'img !

.image_droite {
float: right;
margin: 0;
padding: 0;
margin-left: 15px;
margin-bottom: 5px;
}
.image_droite img {
margin: 0;
padding: 5px;
background: white;
border: 1px solid black;
}

Indépendamment de cet effet de présentation, j'ai toujours les 4px
supplémentaires en strict.
Néanmoins l'avantage de cette séparation fait que le div s'auto-marge
négativement de ces 4px.
Ça se voit si on a installé l'extension Web Developper dans Fx
et qu'on lui demande d'entourer les blocks.

Même combat avec :

.image_droite {
float: right;
margin: 0;
padding: 0;
}
.image_droite img {
margin: 0;
margin-left: 15px;
margin-bottom: 5px;
padding: 5px; /* padding à 0 ne résoud rien */
background: white;
border: 1px solid black;
}

L'important est de ne pas mettre de bordure au div.

Là, je galère pour essayer dans la même feuille de style de donner des
directives de largeur différentes pour IE. J'ai essayé un truc avec :

à propos de quoi ces largeurs ?

width: 200px !important;
width: 184px; /* IE */

Le hack pour IE ( <7 ?)

_width: 184px;

ou :

width: 184px; /* pour IE */
/* hack IE */
width: 200px; /* navigateurs "normaux" */
/* fin hack */

mais ça ne fonctionne pas. Et ça n'a pas l'air très élégant, surtout
(comme ma page passe avec succès les deux validations xHTML/CSS,
maintenant, je fais le malin ;-)).

Le truc : _ + règle ne doit pas être apprécié du validateur.

Pour IE, le plus simple ( ? ! ? !) ce sont les commentaires
conditionnels. C'est M$ qui le dit lui-même, c'est dire !
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx#UsingCCs>
<http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx>

Une idée, à part faire une autre CSS pour IE (ce que je ferai, si
besoin, of course) ?

Ha! Bon! Ben ? tu connais alors le coup des commentaires.

--
sm

SAM

01/12/2009 à 15:03

Le 12/1/09 2:17 PM, Nikita Calvus-Mons a écrit :

SAM a écrit :

On n'a pas le phénomène :
- avec IE 6 et 7 (8... à voir)

Si, je l'avais aussi sur IE7.

Cela viendrait-il de mon Windows (XP SP2) ?

Mais c'est réglé assez simplement en
mettant le border à img, et non au div contenant l'img.

Oui, vu par ailleurs.

--
sm

CSS/xHTML - image dans div, marge en bas impossible à réduire ?

6 réponses

Veuillez sélectionner un problème