bug float sous IE6

**omelhor** · 22/02/2012, 18h34

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 !!!

Mon code source :

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
<!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

**NoSmoking** · 22/02/2012, 18h57

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

Code html :

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

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>

**omelhor** · 22/02/2012, 20h12

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

**NoSmoking** · 23/02/2012, 09h30

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

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
<!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

http://www.w3.org/TR/CSS2/visuren.html#floats

**omelhor** · 23/02/2012, 20h14

Merci beaucoup, c'est vraiment sympas

bug float sous IE6

CSS

Vue hybride

Discussions similaires

Partager

Partager