28220 sujets

CSS et mise en forme, CSS3

[résolu] Problème de liste de définition

Bonjour,

Je suis en train de mettre en place des listes de définitions mais j'ai un problème sur le dd.
Il y a une border left et entre cette border left et le premier mot de la première ligne il y a un espace, mais ce n'est pas le cas sur la deuxième après le <br /> Smiley eek

C'est comme s'il y avait un padding mais seulement actif sur la premiere ligne Smiley confus

Voici le code CSS
dl.newssixt	{
	margin: 10px 25px 5px 25px;
	padding: 5px;
	background: #E0F2FE;
	}

.newssixt dt	{
	float: left;
	width: 150px;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	color: #003399;
	}

.newssixt dd	{
	margin: 0px 0px 0px 155px;
	padding: 0px;
	border-left: 2px solid #003399;
	}



Et le code xhtml
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<title>Site Xhtml strict 1.0 et CSS de GuizMo</title>
<link href="Newsixt.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<dl class="newssixt">
		<dt>Lundi 12 janvier 2004</dt>
		<dd>Ca y est je suis née. Je pèse 3Kg560 et mesure 51 cm.<br />Tout s'est bien passé.</dd>
	</dl>
	<dl class="newssixt">
		<dt>Mardi 13 janvier 2004</dt>
		<dd>J'ai perdu 100 g.<br />C'est normal ne vous inquiétez pas</dd>
	</dl>
</div>
</body>
</html>


Help please je vois pas d'ou cela viens Smiley sweatdrop
Modifié par GuizBizet (30 Apr 2005 - 12:45)
Faudrait que tu nous montres un exemple en ligne histoire que l'analyse du problème soit plus directe, comme ça, à première vue, ça devrait être pareil pour les 2.
ça doit être avec IE (le problème).

Je crois que je l'aie déjà eu moi même, de mémoire la solution c'est 


dt {
height:3em; /* + ou -, il faut tester */
}


bye
Modifié par clb56 (29 Apr 2005 - 20:36)
pour info olivier voila le problème entouré de rouge

sur cette image Smiley cligne

clb56 c'est effectivement avec ie le pbl.
Je ragarde ça demain matin là l est un peu trop tard Smiley langue
Modifié par GuizBizet (30 Apr 2005 - 01:00)
Ahh wé en effet, c'est space...
Bizar cet ecart sous IE...

Je peux pas t'aider sur ce coup là, désolé Smiley ohwell
Je passe la main ^^
Tu nous diras ce que ça donne avec ce que propose clb56
Salut GuizBizet !

clb56 t'a mis sur la bonne piste. Smiley lol

C'est simple, tu es atteint de ce qu'il est commun d'appeler « The IE Three Pixel Text-Jog ». Smiley nuts

The IE Three Pixel Text-Jog ? Quésako ? Smiley nut

Voici une de mes pages qui présente ce bug (voir avec IE).
Dans la première liste, le bug est réparé, mais pas dans les trois autres.
http://www2.csduroy.qc.ca/mdc/discography.html

En éditant les sources, tu verras que pour démonstration, j'ai ajouté une hauteur de 26em à mon float (première liste seulement).

<div class="floating" style="height: 26em;">

Ce 26em est trouvé par essais-erreurs. Il fonctionne à différentes tailles de texte.
Sujet clos
Aller à