[CSS] [IE 6] Problème de div ou de marge

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Sur la pièce jointe, on distingue qu'il y a un interstice entre le header et le menu. Sous IE 7 et FF pas de soucis mais sous IE 6 et inférieur, j'ai le problème.

Je pense que c'est un problème de marge mais avec margin:0 et padding:0 j'ai toujours le problème.

Voici le code 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
57
58
59
60
61
62
63
64
65
66
 
#all
{
margin:auto;
width:980px;
/* background-color:#CCCCCC; */
}
 
#header
{
width:980px;
height:100px;
background-image:url(images/header.jpg);
/* background-color:#CCCCCC; */
}
 
#logo
{
padding-left:20px;
padding-botttom:15px;
width:388px;
height:80px;
float:left;
}
 
#langues
{
padding-top:37px;
padding-bottom:37px;
padding-left:100px;
float:left;
width:111px;
height:26px;
}
 
#connexion
{
/* background:url(images/degrade2.gif) no-repeat 0 0; */
width:300px;
height:80px;
float:left;
padding-top:20px;
}
#join
{
/* background:url(images/degrade2.gif) no-repeat 0 0; */
width:49px;
height:60px;
float:left;
padding-top:40px;
}
 
#menu
{
text-align:center;
width:980px;
height:30px;
background-image:url(images/menu.jpg);
}
 
#menu_1{width:163px; height:25px; float:left; padding-top:5px;}
#menu_2{width:165px; height:25px; float:left; padding-top:5px;}
#menu_3{width:163px; height:25px; float:left; padding-top:5px;}
#menu_4{width:163px; height:25px; float:left; padding-top:5px;}
#menu_5{width:163px; height:25px; float:left; padding-top:5px;}
#menu_6{width:163px; height:25px; float:left; padding-top:5px;}

Et un peu de 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
 
<div id="all">
  <div id="header">
    <div id="logo"><a href="../index.php"><img src="../images/logo 1er septembre.gif" width="320" height="85" alt="logo" border="0"></a></div>
    <div id="langues">
<a href="<?php echo(curPageURL()); ?>lang=fr"><img src="../images/Flags/32/f/France.png" alt="france" width="32" height="32" border="0"></a>
<a href="<?php echo(curPageURL()); ?>lang=en"><img src="../images/Flags/32/u/United Kingdom(Great Britain).png" alt="anglais" width="32" height="32" border="0"></a></div>
    <div id="connexion">
  </div>
  <div id="menu">
    <div id="menu_1"><a href="../search.php" class="menuhaut"></a></div>
    <div id="menu_2"><a href="../about.php" class="menuhaut" ></a></div>
    <div id="menu_3"><a href="../microfinance.php" class="menuhaut" ></a></div>
    <div id="menu_4"><a href="../lenders/portfolio.php" class="menuhaut" ></a></div>
    <div id="menu_5"><a href="../faq.php" class="menuhaut" ></a></div>
    <div id="menu_6"><a href="../contact.php" class="menuhaut" ></a></div>
  </div>
 .....
...
 
 
</div> (all)

:merci:

03/09/2008, 14h54
Bisûnûrs

Tu as l'air d'avoir un formulaire, ça serait les marges par défaut de celui-ci plutôt que des div.

OUi j'ai un formulaire mais j'avais déjà mis margin:0; pour les balises Form.
De plus j'ai supprimé le formulaire et j'ai toujours l'espace donc cela ne vient pas de là.

Voici le code généré :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="all">
  <div id="header">
    <div id="logo"><a href="index.php"><img src="images/logo 1er septembre.gif" width="320" height="85" alt="logo" border="0"></a></div>
    <div id="langues">
<a href="http://www.zonegeeks.com/temp/projet/index.php?lang=fr"><img src="images/Flags/32/f/France.png" alt="france" width="32" height="32" border="0"></a>
<a href="http://www.zonegeeks.com/temp/projet/index.php?lang=en"><img src="images/Flags/32/u/United Kingdom(Great Britain).png" alt="anglais" width="32" height="32" border="0"></a></div>
 
 
  <div id="menu">
    <div id="menu_1"><a href="search.php" class="menuhaut" title="VOus voulez faire une recherche ?" >Lend</a></div>
    <div id="menu_2"><a href="about.php" class="menuhaut" >What is about?</a></div>
    <div id="menu_3"><a href="microfinance.php" class="menuhaut" >Microfinance...?</a></div>
    <div id="menu_4"><a href="lenders/portfolio.php?u=" class="menuhaut" >My portfolio</a></div>
    <div id="menu_5"><a href="faq.php" class="menuhaut" >FAQ</a></div>
    <div id="menu_6"><a href="contact.php" class="menuhaut" >Contact us</a></div>
  </div>
</div>
...
</div> (all)

03/09/2008, 15h58
Bisûnûrs

Tu n'aurais pas un exemple en ligne par hasard ? Avec le code que tu nous as donné on ne peut pas reproduire le problème.

Essaie à tout hasard d'enlever les padding sur le div langues pour voir ce que ça donne.
03/09/2008, 16h11
Erwan31

A priori, le problème vient d'une hauteur du contenu du header supérieure à celle définie pour le header:100px (tu as un menu de 30px et l'image du logo à 85px)
03/09/2008, 20h47
Aspic

Je comprends vraiment pas, j'ai vérifié et tous les hauteurs sont bonnes.
Oui j'ai une image de 85px de haut avec un padding-bottom de 15px ==> 100px

Au fait, le header est composé de deux images en background, une pour le bloc "header" et l'autre pour le bloc "menu" ;)

merci

Salut,

Ajoute : overflow: hidden dans #header

Code:

1
2
3
4
5
6
7
8
9
 
#header
{
width:980px;
height:100px;
background:url(images/header.jpg) no-repeat; 
 
overflow: hidden;
}

A++

03/09/2008, 22h42
Aspic

Ca marche !!

Une petite explication avant le tag :resolu: ?
03/09/2008, 22h48
Erwan31

La solution d'extraman1 résout en effet ton problème mais sans en expliquer la source.
Tes image de drapeaux font 32px au lieu des 26px annoncée dans ta CSS, hors dans IE6 les attributs de taille de l'image prennent le dessus sur la propriété CSS
quand les autres navigateurs font l'inverse.
Ajouté à cela un 2ème problème dû aux espaces sous les images du logo et des drapeaux que tu peux régler avec un vertical-align:bottom (entre autres)
03/09/2008, 22h50
yuukuari

Le tag overflow va définir une règle pour le contenu qui dépasse de ton div (par exemple mettre une scrollbar, couper le contenu, etc..)

Le mettre en hidden le cache tout simplement, donc ton interstice est caché. Ca règle pas le problème: d'où vient cet interstice? mais au moins il y est plus :]

Ya ce qu'il faut ici :mouarf:
http://xhtml.developpez.com/faq/?page=textarea

Yuuk

EDIT: Ups pardon Erwan tu as posté entretemps :roll:
03/09/2008, 22h54
Erwan31

Citation:

Envoyé par yuukuari

EDIT: Ups pardon Erwan tu as posté entretemps :roll:

Pas grave, ton explication est complémentaire à la mienne ;)
03/09/2008, 23h10
Aspic

Ok merci à vous deux, je vais essayer de voir ce qu'il en est plus en détails ;)
03/09/2008, 23h16
Aspic

J'ai trouvé !

C'était les padding-bottom qui plantaient et effectivement la hauteur des drapeaux qui n'étaient pas correctes !

Encore :merci:
03/09/2008, 23h29
Erwan31

Citation:

Envoyé par Aspic

C'était les padding-bottom qui plantaient et effectivement la hauteur des drapeaux qui n'étaient pas correctes !

On dirait que tu n'as pas lu ma réponse jusqu'au bout non? ;)
04/09/2008, 06h07
Aspic

Si mais le vertical-align:bottom ne marchait pas !
04/09/2008, 11h09
Erwan31

Citation:

Envoyé par Aspic

Si mais le vertical-align:bottom ne marchait pas !

Ca veut dire que tu ne l'as appliqué ou il faut, c-a-d aux 3 images, de toute façon tu as déjà la solution de l'overflow ;)
04/09/2008, 18h58
Aspic

Citation:

Envoyé par Erwan31

Ca veut dire que tu ne l'as appliqué ou il faut, c-a-d aux 3 images, de toute façon tu as déjà la solution de l'overflow ;)

Pourtant je n'avais bien mis pour les 3 images !