Décalage d'un div avec IE

**hannahiss** · 28/05/2010, 13h28

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

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

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 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
 
<?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> <!-- End header-wrapper -->
		<div id='content-wrapper'>
			(...)
		</div> <!-- End content-wrapper -->
		<div id='footer'>
			(..)
		</div> <!-- End footer -->
	</div> <!-- End outer-wrapper -->
</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

alors si quelqu'un avait des suggestions...
Merci de votre aide !

**zugolin** · 30/05/2010, 18h34

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?

**hannahiss** · 31/05/2010, 09h16

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

**ekyunoryu** · 25/08/2010, 16h36

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.

voici un extrait du code html :

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

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
 
/* 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.

**ptilemare** · 07/09/2010, 16h10

Bonjour,

Code :

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

1
2
3
4
<!-- Contenu de la page -->
		<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.

Décalage d'un div avec IE

CSS

Vue hybride

Discussions similaires

Partager

Partager