Espace entre 2 blocs

Sujet résolu

15 août 2006 à 0:41:20

Hello

Quelqu'un comprendrait-il pourquoi il y a un espace entre le bloc menu1 et le bloc menu2 sous IE sur cette page (juste au dessus de "Lien vers page 1")?
Merci

<body>

<div id="publicite">
<p>dasfadsf</p>
<p>dasfadsf</p>
<p>dasfadsf</p>
</div>

<div id="content">

<div id="header">
</div>

<div id="left">
<div id="menu1">
</div>
<div id="menu2">
Lien vers page 1
</div>
<div id="menu3">
</div>
</div>

<div id="right">
<a target="_blank" class="external" href="http://www.une-montagne-de-refuges.com/2006_06/fr/" title="Une montagne de refuges">Une montagne de refuges</a> Les 24 et 25 juin 2006, les refuges fêtent la saison d'été. Les beaux jours reviennent, venez fêter en refuge le retour de la saison d'été. Pour la journée, la soirée ou le week-end, selon les refuges, vous avez rendez-vous avec des musiciens, des spécialistes de la nature et de la montagne, des écrivains, des artisans... Menus typiques et réductions pour les familles sont aussi au programme.
</div>

</div>

</body>

*
{
margin: 0;
padding: 0;
}

body
{
width: 990px;
margin: 0;
padding: 0;
font: small/1.6em verdana, sans-serif;
color: #444;
background: #ffffff;
}

#publicite
{
float: right;
width: 100px;
color: #B3B3B3;
background-color: #e2d9d9;
}

#content
{
width: 800px;
margin: 0;
padding: 0;
background: #ffffff url(theme/default/fonds.jpg) repeat-y;
}

#header
{
width: 800px;
height: 149px;
margin: 0;
padding: 0;
background: transparent url(theme/default/header.jpg) no-repeat;
}

#left {
display: inline;
float: left;
width: 205px;
margin: 0;
padding: 0;
background: transparent url(theme/default/01.jpg) no-repeat;
}

#menu1
{
width: 205px;
height: 5px;
margin: 0px;
background-image: url(theme/default/01.jpg);
background-repeat: no-repeat;
}

#menu2
{
width: 144px;
margin: 0px;
background-image: url(theme/default/02.jpg);
background-repeat: repeat-y;
padding: 0px;
padding-left: 32px;
padding-right: 29px;
}

#menu3
{
width: 205px;
height: 40px;
background-image: url(theme/default/03.jpg);
background-repeat: no-repeat;
}

#right
{
width: 520px;
margin: 0;
padding: 0;
margin-left: 205px;
}

Candygirl

15 août 2006 à 1:59:00

IE n'aime pas trop les div vide sous certaines conditions.
Je ne vois pas très bien à quoi sert ton menu1 à part mettre l'image de fond que tu as déjà placé dasn ton #left ? Si tu vire ton div menu1 et que tu ajoutes un padding-top de 5px à #left, tu obtiendras le même résultat mais sans le bug

tofito

15 août 2006 à 2:50:59

Effectivement ça marche nickel grâce à tes conseils, comme vous pouvez voir ici...

Cela dit j'aimerais bien comprendre pourquoi ça ne marche pas comme je l'ai fait précédemment...
J'ai supprimé la ligne "background: transparent url(theme/default/01.jpg) no-repeat;" du bloc #left car effectivement c'était un oubli de ma part et il y avait redondance avec le bloc #menu1...
J'ai rajouté "div {border: 1px solid orange}" dans le fichier css pour visualiser les blocs...
Mais comme vous pouvez le voir ici, le bloc #menu1 ne fait pas 5 pixels de haut contrairement à ce que j'ai indiqué. On peut voir par contre que le bloc #menu3 fait bien quant à lui la taille verticale demandée. Pourtant la définition des 2 blocs est exactement la même:

#menu1
{
width: 205px;
height: 5px;
background-image: url(theme/default/01.jpg);
background-repeat: no-repeat;
}
#menu3
{
width: 205px;
height: 40px;
background-image: url(theme/default/03.jpg);
background-repeat: no-repeat;
}

Alors pourquoi diable le bloc menu3 est-il affiché correctement alors que le bloc menu1 ne l'est pas, sachant donc que les deux blocs sont des blocs vides et que j'ai précisé pour les 2 une taille verticale et pas de marges (si je définis des margin et des padding nulles pour les 2 blocs, cela ne change absolument rien)?

tofito

15 août 2006 à 23:45:29

J'ai enfin trouvé le problème...
IE même s'il n'y a aucun texte dans le div laisse l'espace nécessaire à une ligne de texte verticalement, et cela occupe une taille supérieure aux 5 pixels souhaités.
Du coup, en mettant la taille des caractères à 1 pixel de haut, il me fait plus ch#@#!!

#menu1
{
width: 205px;
height: 5px;
font-size: 1px;
background-image: url(theme/default/01.jpg);
background-repeat: no-repeat;
}