28173 sujets

CSS et mise en forme, CSS3

Problème avec deux blocs et un paragraphe [résolu / solved]

bonsoir,

sous Firefox et Netscape, j'ai un problème d'affichage pour une simple disposition de deux blocs (l'un dans l'autre).

Sous IE, l'espacement n'apparaît plus lorsque les balises <p></p> sont supprimées pour la première phrase.

voici le code css :
body {
	margin: 0;
	padding: 0;
	}

#content {
	background:#CCCCCC;
	}
	
</style>


voici l'html :
<div id="content">
<p>&nbsp;</p>
</div>


Voici le code complet de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	}

#content {
	background:#CCCCCC;
	}
	
</style>

</head>

<body>

<div id="content">
<p>&nbsp;</p>
</div>

</body>
</html>


En remplaçant la ligne <p>&nbsp;</p> par &nbsp; l'espacement blanc au dessus du bloc content (gris) disparaît.

Merci à vous.

Cordialement, Nicolas
Modifié par legal101205 (21 May 2007 - 23:29)
Salut,

Il serait bien de préciser un peu les choses... Un espacement, certes, mais ou quand comment ??
Avec si peu d'explication, un si maigre extrait de code, j'ai peur que personne ne soit en mesure de t'aider.

Je te propose donc de commencer par exprimer ton problème plus précisément, en l'accompagnant si possible d'une page en ligne, ou à défaut les codes html ET css complets. Smiley cligne
Bonjour,

Surement un problème de fusion des marges, rajoute un border-top: 1px solid #cccccc pour vérifier si c'est cela.
Ah oui, j'oubliais de préciser, sous Firefox et Netscape toujours, ça marche si j'ajoute un padding-top ou un border-top (testé à partir d'1px) (du coup le padding-top serait un genre de border-top de la couleur du fond ?), et ça ne change rien avec margin-top.

J'en déduis que la balise <p></p> est définie avec une marge 'top', puisque qu'après essai,
p {margin-top: 0
}

résoud le problème.

Seulement, je veux conserver les propriétés 'par défaut' de p, et je ne veux pas utiliser de padding-top ou de border-top qui incrémente la hauteur du bloc (ce qui m'obligerait à modifier un script javascript).

Cdt, Nicolas
legal101205 a écrit :
Pas avec Netscape !

Tiens, c'est encore un navigateur, Netscape ? Smiley lol
Tu ferais mieux de te soucier de Safari, ou encore d'Opera. En termes de part de marché et de perspectives d'avenir, c'est tout de même plus logique.

legal101205 a écrit :
Si quelqu'un pouvait m'expliquer le processus de ce défaut ?

Pas de défaut, mais un comportement normal (documenté dans la spécification CSS) des navigateurs :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Effectivement, j'ai opté pour 
overflow: auto;
qui donne le résultat recherché, et dont le rendu est identique sur tous les explorateurs (sauf IE).

Un grand merci et un grand bravo.
Sujet clos
Aller à