Pb de CSS sous IE

Version imprimable

Pb de CSS sous IE

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:

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:

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 ;)

03/05/2005, 10h18
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.
03/05/2005, 12h35
beeboo
Saleté d'IE,

j'ai essayé avec :
Code:

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.

La solution trouvée :

Code:

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 :roll:

04/05/2005, 00h33
beeboo

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