balise IE etirement

**pop_up** · 22/02/2008, 11h59

Bonjour,

J'ai un probleme de comportement avec IE à savoir que j'ai une mise en page sur deux colonnes (2 div en float: left) qui fonctionne tres bien sous IE et firefox mais quand je mets du contenu en italique dans la colonne 1 , le div s'étire légérement sous IE alors que sous firefox la largeur ne bouge pas.

Pourtant, cette colonne à une largeur fixe de 36.69em soit 587px.

Comment puis je corriger ce probleme de comportement ?

merci

EDIT: ce probleme apparait dans IE6 et pas IE7

**hakurou** · 22/02/2008, 13h40

Bonjour,

avec un petit code ce serait peut etre plus simple de voir ca !

j'ai fais quand même selon tes indiquations une page a la c##

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
 
<style>
#col1{
	width:587px;
	background-color:#8879ff;
	height:100px;
	float:left;
}
 
#col2{
	width:200px;
	background-color:#87f84f;
	height:100px;
	float:left;
}
</style>
 
<div id="col1">
<em>blabla</em>
</div>
 
<div id="col2"></div>

je n'observe aucune deformation de la page sur IE6, donc fait nous voir un bout de code !

sinon tu as la methode brutale je dirais en faisant des commentaires conditionnelles qui ne seront lu que par IE6, tu incluras un fichier css de corrections

par exemple :

Code :

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

1
2
3
4
5
 
<!--[if lte IE 6]>
	<link href="correctionsIE6.css" rel="stylesheet" type="text/css" />
 
<![endif]-->

**Bisûnûrs** · 22/02/2008, 14h20

Un texte italique prenant plus de place qu'un texte normal, lorsque ton texte italique arrive en fin de ligne (en général le problème apparait lorsque le texte est justifié et de temps en temps quand le texte arrive en fin de ligne au pixel près) il "dépasse" de quelques px, ce qui fait que sur IE6 le bloc est agrandi de quelques px.

**pop_up** · 22/02/2008, 14h34

voici un exemple.

Sous IE6, en enlevant le tu verras une petite différence mais celle ci suffit a me poser probleme.

merci

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
56
57
58
59
60
61
62
63
64
65
66
 
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>test</title>
    <style>
	div.contenuPrincipal {
		width: 36.69em;                                                              /* 587px */
		margin:0;
		padding:0;
	}
 
	div#contenu {
    	width: 36.7em;
		margin:0;
		padding:0;
	}
 
	h1 {
		background-color: red;
		margin:0;
		padding:0;
	}
 
	div.contenuCentre {
		width: 22em;                                                                /* 352px */
		padding: 0 1.13em 0 0.63em;                                                 /* 0 18px 0 10px */
		background-color: green;
		float: left;
		margin:0;
	}
 
	div.contenuDroit{
		padding-left: 0 0 0 1.2em;
		width: 10.69em;                                                             /* 171px */
		margin:0;
		background-color: pink;
	}
	</style>
</head>
 
<body>
<div id="contenu">
	<h1>Titre 1</h1>
	<div class="contenuPrincipal">
		<div class="contenuCentre">
			<h2>titre 2</h2>
			<h3>titre 3</h3>
			<p>
				sdfg jkhl dhfjksl dfs ghjld ghieurt ysfg hkjdpefg idufhg jkdhg dugf kdjfgh djkg lyduf ghjg _syut khfgjkldsfg gfksh dfgys jgh dkjfgh lkfjdg hjgk ldfhg hdfjkg lhjdfkg hdfjg dygjreh mudfygjkhdf g_emrytoisdfg lfjmvkcxlug iejr,kgnvfùdlv eùorkg,;fghd muofgyrkjzhet isfgfiulsdgt hgjh om_rthjg mo_rtougio mdjghjkmsf_oturoueryt jhgfnkvbzmuor rthj ujhfkjsfg uerytmh fksjd giuyerh ru jfsgdyguioermtghdfiomug oeri orhgù <br /><br />
				<em>keughk djhsfg fjgh eru_ytoshfg jkhdfgmozeru yuksdyyyy gfhjfdlm goiure hmqsjdfg hùpçerut oyr tjkgm fdpougùeroth kljsfhg çrut oislhgf jkhmsf guçpur tjfhgm ouiyrtùiop lsfgh oùru tlkjfgk hrùmtçpuzrlh flskgyoeùrgldfhg moret lkfjg mjfdyg ùpzro tskhgùeqrtç^zr mosfigy port iosifg lkerhjg ùçpusfg lkshfg uzrôpit usmfqghmqysg ùpzru gjskdfygùperuiog dhsfjg ùçprit*^fmgu sùdçpfuy*pe<br />
				ksf jhj kcvh ziouerzeoizhjdfk sfhj uiroez hjdksfm ksjf ljhsqgù ipqekhg k:sdj fhmz ksndfg uiskydf kjsf :khtsgdf mitgqsu keughk djhsfg fjgh eru_ytoshfg jkhdfgmozeru yuksdy gfhjfdlm goiure hmqsjdfg hùpçerut oyr tjkgm fdpougùeroth kljsfhg çrut oislhgf jkhmsf guçpur tjfhgm ouiyrtùiop lsfgh oùru tlkjfgk hrùmtçpuzrlh flskgyoeùrgldfhg moret lkfjg mjfdyg ùpzro tskhgùeqrtç^zr mosfigy port iosifg lkerhjg ùçpusfg lkshfg uzrôpit usmfqghmqysg ùpzru gjskdfygùperuiog dhsfjg ùçprit*^fmgu sùdçpfuy*pe keughk djhsfg fjgh eru_ytoshfg jkhdfgmozeru yuksdy gfhjfdlm goiure hmqsjdfg hùpçerut oyr tjkgm fdpougùeroth kljsfhg çrut oislhgf jkhmsf guçpur tjfhgm ouiyrtùiop lsfgh oùru tlkjfgk hrùmtçpuzrlh flskgyoeùrgldfhg moret lkfjg mjfdyg ùpzro tskhgùeqrtç^zr mosfigy port iosifg lkerhjg ùçpusfg lkshfg uzrôpit usmfqghmqysg ùpzru gjskdfygùperuiog dhsfjg ùçprit*^fmgu sùdçpfuy*pe keughk djhsfg fjgh eru_ytoshfg jkhdfgmozeru yuksdy gfhjfdlm goiure hmqsjdfg hùpçerut oyr tjkgm fdpougùeroth kljsfhg çrut oislhgf jkhmsf guçpur tjfhgm ouiyrtùiop lsfgh oùru tlkjfgk hrùmtçpuzrlh flskgyoeùrgldfhg moret lkfjg mjfdyg ùpzro tskhgùeqrtç^zr mosfigy port iosifg lkerhjg ùçpusfg lkshfg uzrôpit usmfqghmqysg ùpzru gjskdfygùperuiog dhsfjg ùçprit*^fmgu sùdçpfuy*pe<br />
				keughk djhsfg fjgh eru_ytoshfg jkhdfgmozeru yuksdy gfhjfdlm goiure hmqsjdfg hùpçerut oyr tjkgm fdpougùeroth kljsfhg çrut oislhgf jkhmsf guçpur tjfhgm ouiyrtùiop lsfgh oùru tlkjfgk hrùmtçpuzrlh flskgyoeùrgldfhg moret lkfjg mjfdyg ùpzro tskhgùeqrtç^zr mosfigy port iosifg lkerhjg ùçpusfg lkshfg uzrôpit usmfqghmqysg ùpzru gjskdfygùperuiog dhsfjg ùçprit*^fmgu sùdçpfuy*pe</em>
			</p>
		</div>
 
		<div class="contenuDroit">
			<h4>titre 4</h4>
				fdghfgdh gfdh df gf hdfgh  
				<p>dfghrtyetyerty</p>
		</div>
	</div>
</div>
</body>
</html>

**hakurou** · 22/02/2008, 15h27

le pourquoi c'est Bisûnûrs qui vient de l'expliquer!

contrairement a d'autres navigateurs, IE6 agrandit les blocks où les textes sont trop juste au niveau taille et comme Bisûnûrs le dit, l'italique allonge un peu le texte.

la solution que je t'apporte est la suivante:

etant donnée que tes tailles de blocks sont fixes,
- tu enleve le padding de div.contenuCentre ce qui fera prendre toute la place a ton 
- tu definie une taille a ton qui sera inferieur a celle de son conteneur
- tu lui applique margin:auto; (au )

cela centrera ton dans ton contenuCentre, ainsi, tu peux mettre ton texte en italique, le d'agrandira un peu mais pas son conteneur !