Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Decalage bandeau/image

14 réponses
Avatar
romer
Hi,

Petit pb simple que je n'arrive cependant pas à résoudre.
J'ai une image de 820px de large et 400px de haut.
Je veux coller un tout petit liseré gris de 2 px qui la touche par
dessous.
On observe alors un décalage de 2 px entre l'image et le bandeau.

<div><img src="img.jpg"></div>

#bande {
height: 2px;
background-color:#ccc;
}

J'obtiens ce que je souhaite en ajoutant à la règle css :
margin-top: -2px;
}

Pouvez-vous me dire pourquoi ?

De plus, ça marche sous le Mac mais est-ce que IE6 et 7 vont apprécier
ça ?

--
A+

Romer

4 réponses

1 2
Avatar
Pierre Goiffon
Olivier Miakinen wrote:
<div id="logo"><a href="http://page.paris.fr/"><img
src="images/logo.gif" alt="Logo de la page" /></a> </div>


^
Ok. Donc, la seule différence est cette espace en trop dans le DIV, à
côté du lien qui contient l'image. Avec cette espace, ton DIV contient
donc deux choses, d'une part une image, et d'autre part un texte (d'où
le problème dû à la distance entre la « ligne de base » et le bas du
caractère, ce qui te rajoute quelques pixels). Sans cette espace, le
DIV ne contient qu'une image.

Or le traitement de ces espaces en trop au début et à la fin des balises
est différent en SGML et en XML : SGML les retire, XML les laisse. Donc,
pour IE 5.5 et IE 6 qui ne connaissent pas du tout XML et traitent le
XHTML comme du HTML un peu bugué, il est normal qu'il n'y ait pas de
pixels supplémentaires ; réciproquement, pour les navigateurs qui savent
lire du XML, il est normal que cela se décale.



J'ajouterai quelques questions supplémentaires car j'ai l'impression
d'avoir raté des épisodes...
Est-ce que la page de Bernd contient un doctype XHTML ? Est-elle servit
systématiquement en text/html ou avec négociation de contenu ?
Avatar
Olivier Miakinen
Le 07/07/2008 10:22, Pierre Goiffon a écrit :

Or le traitement de ces espaces en trop au début et à la fin des balises
est différent en SGML et en XML : SGML les retire, XML les laisse. Donc,
pour IE 5.5 et IE 6 qui ne connaissent pas du tout XML et traitent le
XHTML comme du HTML un peu bugué, il est normal qu'il n'y ait pas de
pixels supplémentaires ; réciproquement, pour les navigateurs qui savent
lire du XML, il est normal que cela se décale.



J'ajouterai quelques questions supplémentaires car j'ai l'impression
d'avoir raté des épisodes...



Ce sera à Bernd de répondre exactement, mais les réponses à tes
questions m'intéressent alors je me permets de compléter.

Est-ce que la page de Bernd contient un doctype XHTML ?



Je l'ai supposé en voyant les balises vides img terminées par un « / »,
d'autant plus pour un problème concernant les espaces de fin d'élément.

Est-elle servit



servite ? ;-)

systématiquement en text/html ou avec négociation de contenu ?



Alors ÇA c'est une question fichtrement intéressante. Parce que si le
décalage apparaît sur un navigateur alors que la page est servie en
text/html, cela veut dire que ce navigateur applique quand même les
règles XML, ou du moins une partie d'entre elles, même s'il n'utilise
pas forcément un parseur XML.
Avatar
romer
Pierre Goiffon wrote:

J'ajouterai quelques questions supplémentaires car j'ai l'impression
d'avoir raté des épisodes...
Est-ce que la page de Bernd contient un doctype XHTML ?



Oui
<?php header("Content-Type: text/html; charset=utf-8");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Est-elle servit
systématiquement en text/html ou avec négociation de contenu ?



Comprends pas bien...
--
A+

Romer
Avatar
Olivier Miakinen
Le 07/07/2008 12:13, Bernd a écrit :

J'ajouterai quelques questions supplémentaires car j'ai l'impression
d'avoir raté des épisodes...
Est-ce que la page de Bernd contient un doctype XHTML ?



Oui
<?php header("Content-Type: text/html; charset=utf-8");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">



Merci.

Est-elle servie
systématiquement en text/html ou avec négociation de contenu ?



Comprends pas bien...



Tu as déjà répondu :
<?php header("Content-Type: text/html; charset=utf-8");?>

C'est donc de la soupe de tags pour tout le monde, y compris Firefox,
Opera, etc.
1 2