bug float sous IE6

Version imprimable

bug float sous IE6

Bonjour,

Je dois faire un intranet dans ma boite qui est encore sous IE6....

Je n'arrive pas à positionner ma balise <h1> dans mon header sous IE6
Non seulement il m'agrandit la taille de mon header, mais en plus mon margin-top ne fonctionne pas !!!

http://www.directpsg.fr/bugIE6.gif

Mon code source :

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
<!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" lang="fr">
<head>
<style>
html,body,ol,ul,form,fieldset,table,td,tr{
	margin:0;
	padding:0;
}
 
body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	text-align: center; /* pour corriger le bug de centrage IE */
}
 
 
.clearRight{
	clear:right;
}
 
#main{
	margin-left: auto;
	margin-right: auto;
	width:700px;
}
 
#header{
	padding-top:20px;
	height:90px;
	border: 1px solid black;  
	text-align: left;
}
 
#header h1{
	float:right;
	margin-top:20px;
	margin-right:20px;
	color:black;
	height:40px;
}
 
 
</style>
 
</head>
 
<body>
<div id="main">
	<div id="header">
		<a href="/exploitation/index.php"><img height="82" border="1" width="300" src="/exploitation/images/logo2.jpg"></a>
		<h1>Exploitation</h1>
	</div>
	<div class="clearRight"></div>
 
 
</div>
</body>
</html>

Pouvez-vous m'aider svp ?

Merci beaucoup

Bonjour,
inverse l'ordre d'apparition dans ta feuille, le H1 en premier.

Code:

1
2
3
4
5
6
7
<div id="main">
  <div id="header">
    <h1>Exploitation</h1>
    <a href="/exploitation/index.php"><img height="82" border="1" width="300" src="/exploitation/images/logo2.jpg"></a>
  </div>
  <div class="clearRight"></div>
</div>

22/02/2012, 20h12
omelhor

Ca a fonctionné merci beaucoup !!
Pour ma culture c'est dû a quoi ?

pas bien eu le temps de développer la réponse ;)

Tout d'abord un rappel, le flux est la façon normale d'afficher les éléments tel que, chronologiquement rencontrés dans la page.

La propriété float:left|right permet de "supprimer" du flux l'élément possédant cette propriété forçant ainsi les éléments suivants, qui se trouvent dans le flux, à occuper la place laissée libre, cela permet notamment d'entourer un élément, une image par exemple, par du texte.

Même si les navigateurs actuels permettent, dans certaines conditions, un "rétropédalage" pour replacer les éléments aux mieux et ce fonction de leurs propriétés, il semblerait que IE respecte la philosophie du float. Il te suffit pour t'en convaincre d'ajouter un texte assez long après ton image pour voir que TOUS les navigateurs mettront ton titre plus bas.

La méthode à suivre donc est
- lecture élément, float:right -> sort du flux -> positionnement à droite
- lecture élément suivant, normal, -> place à la position suivante du flux, à gauche dans ton cas...

exemple d'illustration:
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 <!DOCTYPE HTML> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[...]</title> <meta name="Author" content="NoSmoking"> <style type="text/css"> html, body{ font-family:verdana, sans-serif; font-size:1em; } div{ width:800px; margin:10px auto; padding:10px; border: 1px solid #e0e0e0; } h1 { color: #6699CC; font-size: 1.25em; } #div_1 img{ float:right; margin:0 0 0 5px; } #div_2 img{ float:left; margin:0 5px 0 0; } </style> </head> <body> <div id="div_1"> <img id="image" src="http://www.developpez.net/template/images/logo.png" alt="www.developpez.net"> <h1>img{float:right;}</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="div_2"> <img src="http://www.developpez.net/template/images/logo.png" alt="www.developpez.net"> <h1>img{float:left;}</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>
plus d'info :fleche: http://www.w3.org/TR/CSS2/visuren.html#floats

23/02/2012, 20h14
omelhor

Merci beaucoup, c'est vraiment sympas