Discussion :

[NicoStein]

J'ai un petit pb de CSS avec un div qui contient une image en background et qui pour une raison étrange est plus haute que prévue :

mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
			<div id="col_droite">
				<BOUCLE_accueil(ARTICLES) {titre_mot=accueil} {0,5}>
					<div class="haut_bloc_droit">&nbsp;</div>
					<div class="contenu_bloc_droit">
						<h3>#TITRE</h3>
						<p>#DESCRIPTIF</p>
						<p class="lasuite"><a href="#URL_ARTICLE">La suite...</a></p>
					</div>
					<div class="bas_bloc_droit">&nbsp;</div>
				</BOUCLE_accueil>		
			</div>

le CSS associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#col_gauche {
	float: left;
	/* margin-left: 7px; ok pour moz mais 2 px pour IE */
	margin-left:7px;
	width: 151px;
	margin-bottom: 20px;
	}
 
#col_centre {
	float: left;
	width: 360px;
	margin-top: 8px;
	margin-bottom: 20px;
	margin-left: 7px;
	margin-right: 7px;
	background-color: #FFFFFF;
	padding: 5px 5px 5px 5px;
	}
 
#col_droite {
	float: right;
	/* margin-right: 7px; ok pour moz mais 2 px pour IE */
	margin-right:7px;
	margin-bottom: 20px;
	margin-top: 8px;
	width: 151px;
	}
 
/* -- BLOCS DROITS -- */
 
.haut_bloc_droit {
	background-image: url(cg/angle_cartouche_haut.png);
	background-repeat: no-repeat;
	height:12px;
	}
 
.bas_bloc_droit {
	background-image: url(cg/angle_cartouche_bas.png);
	background-repeat: no-repeat;
	height:25px;
	}
 
.contenu_bloc_droit {
	border-left: 1px solid #F2EBCC;
	border-right: 1px solid #F2EBCC;
	background-color: #FFFFFF;
	width: 136px;
	padding: 5px 5px 5px 10px;
	}
 
.lasuite {
	text-align: right;
	font-size: 10px;
	margin: 5px 0 0 0;
	}

Le résultat est visible sur http://chtinico.dyndns.org/mariage/site/

Si qqn a une solution je suis preneur.

Ah si qqn sait aussi comment on peut attribuer une CSS pour IE et une autre pour FF, je suis preneur

[NicoStein]

J'ai rajouté un ligne en bas de la "cellule" haut_bloc_droit afin que vous puissiez mieux (?) voir l'écart qui pose pb sous IE 6.

Enlever le   ne change rien au passage.

[beeboo]

Saleté d'IE,

j'ai essayé avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.haut_bloc_droit {
   background-image: url(cg/angle_cartouche_haut.png);
   background-repeat: no-repeat;
   background-position: bottom center;
   height:12px;
   }

Qui aligne ton image de fond vers le bas et donc touche le centre du bloc mais le div reste à une hauteur supérieure à celle qu'on veut lui donner et donc il reste un petit décalage vers le bas du bloc supérieur.

[NicoStein]

La solution trouvée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.haut_bloc_droit {
        background-image: url(cg/angle_cartouche_haut.png);
        background-repeat: no-repeat;
        height:12px;
        font-size: 0px;
        }

Le font-size permet de réduire la hauteur du bloc...

Pas intuitif en tous cas

[beeboo]

C'est marrant, j'avais essayé ça mais ça n'a rien donné, j'ai dû me gourrer.