float / clear

Bonjour,

Ca fait un bon moment que j'essaye de comprendre un problème que j'ai avec une combinaison float et clear, sans trouver la solution.

Je vous livre le code simplifié de ma page et du fichier css à la fin de ce message.

J'ai créé un sommaire qui se retrouve à côté du texte (Texte 0) grace à un float dans son style. Jusque là, tout va bien.

Il est suvi d'une ligne (Titre 1) donc le style ne peut pas contenir de clear parce qu'elle comporte elle-aussi un élément avec un float (Haut Bas).

Donc, entre les deux, j'ai mis une ligne vide qui a pour seule fonction d'avoir un style "clear" pour empêcher les deux de se mélanger.

Code:

<div class="FloatLim"><p></p></div>

Quand le paragraphe "Texte 0" est plus grand que le sommaire (c'est à dire qu'il fait 3 lignes ou plus, tout se passe bien.
Par contre, s'il fait 2 lignes ou moins, la marge de gauche su style Main disparait. Ou plus exactement, la marge prend la couleur de la zone et le border se retrouve à l'extérieur de la marge.

Vous pouvez le constater en modifiant la largeur de la fenêtre.

Je ne comprends pas du tout ce phénomène.

Auriez-vous une explication ou, mieux, un remède ?

Merci d'avance.

Je précise que j'ai testé ma page avec IE6.

Le code de la page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr-FR">
 
<head>
	<meta http-equiv="Content-Type"     content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-language" content="fr-FR" />
	<meta name="language"       content="fr-FR" />
 
	<link rel="stylesheet" type="text/css" href="style.css" title="Feuille de styles" />
 
	<title>Exemple</title>
</head>
 
<body><div id="top"></div>
	<div class="Main">
 
		<span class="Sommaire">
			Sommaire<br />
			<a href="#Titre 1" title="Lien interne" >Titre 1</a><br />
			<a href="#Titre 2" title="Lien interne" >Titre 2</a><br />
			<a href="#Titre 3" title="Lien interne" >Titre 3</a><br />
		</span>
 
		<p>
			Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0 Texte 0.
		</p>
 
		<div class="FloatLim"><p></p></div>   <!-- Fin de sommaire -->
 
		<span class="Retour"><a href="#top" title="Haut de page">Haut</a><br /><a href="#bas" title="Bas de page">Bas</a></span>
		<h2 id="Titre 1">Titre 1</h2>
 
		Texte 1 Texte 1 Texte 1.
	</div>
 
<div id="bas"></div>
</body>
</html>

Le code du fichier css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
body {     /* Ensemble de la page */
	color: black;
	text-align: center ;
	font-family: verdana, tahoma, helvetica, arial, sans-serif;
	font-size: 100%;
	margin: 1ex;
	line-height: 150% ;
	background-color : #AAEEAA ;
	}
 
.Sommaire,   .Sommaire a:link,  .Sommaire a:hover,   .Sommaire a:visited   { /* Liens internes à la page */
	color: black ;
	}
 
.Sommaire {
	font-size: 90%;
	border-style: solid;
	border-width: 1px;
	padding: 0.5ex 1ex 0.5ex 1ex;
	margin: 0.5ex 0 0.5ex 0;
	float: right;
	line-height: 130% ;
	text-align: left;
	background-color : #E2F5E9 ;
	}
 
.Sommaire           {text-decoration: none     ;}
.Sommaire a:link    {text-decoration: none     ;}
.Sommaire a:visited {text-decoration: none     ;}
.Sommaire a:hover   {text-decoration: underline;}
 
.FloatLim {
	clear: both;
	}
 
.Main {         /* Corps de texte */
	color: black;
	vertical-align: top :
	border-color: black;
	border-width: 1px;
	border-style: solid ;
	padding: 1px 2ex 1px 2ex ;
	margin : 0 0 0 0 ;
	text-align: left ;
	background-color : #ECFFF2 ;
	}
 
h2 {            /* Titres de chapitre */
	font-weight: bold;
	font-size: 120%;
	text-align: left ;
	letter-spacing : 3px ;
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	padding: 1ex 1ex 1ex 1ex ;
	margin: 1ex 0 0 0 ;
	background-color : #E2F5E9 ;
	}
 
.Retour, .Retour a:link,.Retour a:hover, .Retour a:visited {   /* Liens internes à la page */
	color: black ;
	}
 
.Retour {
	font-size: 90%;
	padding: 0 1ex 0 1ex;
	float: right;
	line-height: 130% ;
	text-align: right;
	}

Citation:

Envoyé par Menhir

Le code de la page :

Code:

<?xml version="1.0" encoding="iso-8859-1"?>

La déclaration xml fait passer IE6 en mode quirks. Il est déconseillé de le mettre afin que IE passe en mode presque standard et interprète au mieux ton code. Il me semble que le supprimer fait d'ailleurs disparaître ton problème. Je ne saurais t'expliquer exactement pourquoi, ne m'intéressant pas vraiment à cherche à comprendre le comportement d'IE en mode quirks avec les positionnements css ;)

Merci !

Je te remerci beaucoup !
Effectivement, ça marche !!!! :mouarf:

Je ne sais pas ce qu'est le mode quirks (mais je vais me renseigner). En fait, j'ai appris le (X)HTML/CSS sur le tas et j'avais concervé les premières ligne de la page qui m'a servi de model parce que je ne comprends pas vraiment ce qu'elles contiennent.
Par exemple, pour mon DOCTYPE, je crois que je pourrais le mettre en stric étant donné les modifications de code que j'ai faites, mais ne sachant pas ce que ça impliquerait, je préfère l'éviter.

Je viens d'ailleur de m'apercevoir d'un truc bizarre. Cette ligne que tu m'as conseillé de supprimer, lorsqu'elle est mise en commentaires, IE l'interprète quand même. 8O

Merci encore. :king:

Citation:

Envoyé par Menhir

Cette ligne que tu m'as conseillé de supprimer, lorsqu'elle est mise en commentaires, IE l'interprète quand même. 8O

En fait c'est le doctype qui n'est pas interprèté sur IE6 dès qu'il y a quelque chose avant. Ce quelque chose peut être la déclaration xml que tu avais mis ou n'importe quel commentaire html. Le doctype doit donc être la toute première chose en haut de la page.

Je me suis un peu renseigné sur le sujet et j'ai cru comprendre que c'est aussi pour ça que j'avais des problèmes avec mes margin, padding et border, m'obligeant à mettre des "border-style: hidden;" un peu partout dans mon CSS pour éviter certains comportements abérants.

Par contre, je n'ai pas compris la différence entre XML et XHTML. Mais je suppose que je fais partie des 90% des créateurs de sites pour qui ça n'a pas d'importance.