Décalage d'un div avec IE

Version imprimable

Bonjour,
Je travaille sur la mise en forme (template) du blog Blogger tkp2010.blogspot.com/.

En entête du blog, il y a une image qui sert de bandeau. Dans ce bandeau, j'ai défini des zones cliquables sur les logos des partenaires, comme ceci :
Code:

1 2 3 4 5 6 7 8 .linkTKP { /* zone cliquable */ float: left; width : 155px; height: 85px; margin-left: 140px; margin-top: 195px; }
Puis, dans le body, j'ai fait des liens utilisant le style css défini ci-dessus :
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 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> (...) <body> <div id='outer-wrapper'> <div id='header-wrapper'> <a href='http://tkp2010.blogspot.com' class="linkTKP" alt="TKP 2010" title="Trégor Kite Party 2010 - Accueil"/> (...) <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Trégor Kite Party 2010 (en-tête)' type='Header'/> </b:section> <div class='navmenu'> <div class='navmenu-wrapper'> <ul class='menu'> <li><a expr:href='data:blog.homepageUrl' id='actuA' title='Actualités'><span id='actuSpan'>Actualités</span></a></li> (...) </ul> </div> </div> </div>  <div id='content-wrapper'> (...) </div>  <div id='footer'> (..) </div>  </div>  </body> </html>
Le problème est que sous IE ça provoque le décalage du div "navmenu" vers le bas d'autant de pixels, alors que sous Firefox, ça fonctionne très bien...
Je suis dessus depuis un moment :cry: alors si quelqu'un avait des suggestions...
Merci de votre aide !

30/05/2010, 18h34
zugolin

salut,
apparament, tu n'as pas trouvé, non?
(j'utilise "ietester" pour controler sous ie8 /ie7/ ie6 etc....)
... et une image map, t'as essayé ?
ça serait peut etre plus simple,non?
31/05/2010, 09h16
hannahiss

Merci de ta réponse, je n'ai toujours pas trouvé de solution. Du coup, j'ai essayé avec une image map, comme suggéré, mais là ça décale sous IE ET sous Firefox....
Comment faire pour que mon div en-dessous ne se décale pas ????

J'ai un problème similaire

cela fait un moment que je cherche une solution sans trouver quoi que ce soit qui le résolve.

Voici un screenshot du résultat.

http://img11.hostingpics.net/pics/233088bug.png

voici un extrait du code html :

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
 
<div id="col_principale">
	<!-- Navigation -->
	<div id="nav">
	<div class="nav-haut"></div>
	<div class="nav-centre">
		<ul>
			<li><a href="#">C'est là</a></li>
			<li><a href="#">que ce</a></li>
			<li><a href="#">trouve</a></li>
			<li><a href="#">les liens</a></li>
			<li><a href="#">de navigation</a></li>
		</ul>
	</div>
	<div class="nav-bas"></div>
</div>
		<!-- Contenu de la page -->
		<div id="contenu">
			<div class="contenu-haut"></div>
			<div class="contenu-centre">
				<h2>sommaire du site</h2>
				<h3>adepape27</h3>
				<p>C'est dans cette partie que l'on doit mettre le contenu de la page.</p>
				<p>Il doit contenir :</p>
				<ol>
					<li>le titre de la page</li>
					<li>éventuellement un sous titre</li>
					<li>le texte de la page</li>
				</ol>
			</div>
			<div class="contenu-bas"></div>
		</div>
	</div>

et voici le css :

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
 
/* Colonne principale */
#col_principale {
	width: 100%;
	overflow: hidden;
 
}
 
/* Navigation */
#nav {
	background: #ffffff;
	width: 200px;
	float: left;
}
.nav-haut {
	background: url(../images/fond-nav-haut.png) no-repeat;
	height: 26px;
	padding:0;
	margin:0;
}
.nav-centre {
	background: url(../images/fond-nav-centre.png) repeat-y;
}
.nav-bas {
	background: url(../images/fond-nav-bas.png) no-repeat;
	height: 50px;
	padding:0;
	margin:0;
}
#nav ul {
	margin: 0;
	padding: 10px;
	list-style: none;
}
 
/* Contenu */
#contenu {
	background: #ffffff;
	margin-left: 220px;
	padding: 0;
}
.contenu-haut {
	background: url(../images/fond-contenu-haut.png) no-repeat;
	height: 26px;
	padding: 0;
	margin: 0;
}
.contenu-centre {
	background: url(../images/fond-contenu-centre.png) repeat-y;
}
.contenu-bas {
	background: url(../images/fond-contenu-bas.png) no-repeat;
	height: 50px;
	padding: 0;
	margin: 0;
}

J'ai fait pas mal de recherche sur le web, il y a pas mal de solution proposé, dont l'utilisation de position relative. Mais aucune n'a résolu mon problème. Je ne parviens pas à savoir d'où sort ce décalage et comment le supprimer.

07/09/2010, 16h10
ptilemare
Bonjour,
Code:

1 2 3 4  <div id="contenu"> <div class="contenu-haut"></div> <div class="contenu-centre">
Tu as peut être un espace entre le <div id="contenu"> et le <div class="contenu-haut">

Bien cordialement.