Espacement entre div/image sous IE... bug ?

Sujet résolu

8 février 2006 à 4:56:08

Bonjours à tous!
C'est la première fois que je poste ici, les gens on l'air de beaucoup s'entraider donc je vais m'essayer

Mon probleme est qu'il se créé un espacement entre mon image et un DIV, j'ai essayé plusieurs méthodes pour déceler le problème,mais sans succès...

Le bug est présent sous IE6, mais si j'essais avec Firefox, je n'ai aucun problème...

Regardez (espace à droite du design): Cliquez-ici

Voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="content">
<div id="menu_top"><img src="images/menu_home.gif" width="117" height="46" alt="Home" /><img src="images/menu_addprog.gif" alt="Add Program" /><img src="images/menu_advertise.gif" alt="Advertise" width="119" height="46" /><img src="images/menu_blacklist.gif" alt="Blacklist" /><img src="images/menu_partners.gif" alt="Partners" /><img src="images/menu_contact.gif" alt="Contact" width="115" height="46" /></div>
<div id="banner"><img src="images/banner_logo.gif" alt="logo" /><img src="images/banner_ppl.gif" alt="ppl" /></div>
<div id="top5"><img src="images/top5_top.gif" alt="" width="129" height="49" /><div id="top5_content">abcdefg</div><img src="images/top5_bottom.gif" alt="" /></div>
<div id="top5_2"><img src="images/banner_top5_right.gif" alt="top5right" /></div>
</div>
</body>
</html>

Et voici mon CSS:

/* CSS Document */
body
{
width: 709px; /* Valeur doit etre remise à 706 (mise à 709 pour montrer l'espace générée, sinon l'image allait enbas de la banière car la largeur excédais à 706 à cause de cette espace)*/
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

#menu_top
{
width: 706px;
height: 46px;
margin: 0px;
padding: 0px;
}

#banner
{
float: left;
width: 546px;
margin: 0px;
padding: 0px;
}

#top5
{
float: left;
width: 129px;
height: 151px;
margin: 0px;
padding: 0px;

}

#top5_2
{
height: 151px;
margin: 0px;
padding: 0px;

}

#top5_content
{
width: 129px;
height: 83px;
margin: 0px;
padding: 0px;
background-image: url("images/top5_content.gif");
background-repeat: no-repeat;
}

Si vous conaissez la provenance de cet espace généré (3pixel), merci de me le communiquer

Merci à l'avance !
@+
Raph

JulFisher

8 février 2006 à 11:06:49

Tu as essayé de faire le menu sans image ? Je suis sûr que ça alègerait énormément ton site et te simplifira des futurs changements

Sinon tu n'as pas un lien vers ta page ?

raphjutras

8 février 2006 à 15:10:22

Bah, je vais faire sa cesoir alors (je suis au québec)

...

Entoutcas si avez une idée quand-meme, vous me laisserez un message!
Merci!

jp949

8 février 2006 à 15:46:52

deja si c'est un flottant qui cette marge mets display:inline;

raphjutras

8 février 2006 à 23:03:32

Merci de vos réponses, mais je cros que sa n'a rien arrangé le "display:inline" (à moins que je m'ait trompé sur son utilisation, ce qui pourrais etre très probable car je suis débutant en CSS

)... donc j'ai remis le css original.

Je vien de mettre le header "buggé" en ligne à cette adresse: Cliquez-Ici

Le bug est présent sous IE6, mais si j'essais avec Firefox, je n'ai aucun problème...

Si vous trouvez le probleme, merci de me le communiquer!
J'attend vos réponses avec impatience

Merci bcp et Bonsoir!
Raph
@+

raphjutras

9 février 2006 à 12:56:24

Un petit up =)

raphjutras

10 février 2006 à 1:23:40

Est-ce que personne ne sait comment résoudre ce problème, ou personne ne veut m'aider =(

Si vous n'avez qu'un seule petite idée de ce quoi je devrais changer dans mon code pour régler ce problème, merci de me le faire savoir! (PS: Meme si sa fonctionne pas au final, vous aurez essayé)

Merci
@+
Raph

UGohan

10 février 2006 à 1:39:27

moi je ne vois vraiment pas quel est le pb, ça m'affiche la meme chose sous ie et firefox ...

Anonyme

10 février 2006 à 2:58:17

franchement ...
j'en sais rien perso

a mon avi t'a plus vite fait de faire ca en position:absolute; la au moin tu sais ou tu va
(en tout cas moi je le sais c'est pour ca que je l'utilise tt le temps :D)
enfin j'ai pas de solution pour arranger ton code apres si tu peut le modifier .....

bon courage t'en aura besoin pour ce truc

ca m'a l'air plutot vilain

Anonyme

10 février 2006 à 15:56:31

j'ai eu le problem cette nuit et ....
en exclu mondial

c'est tout bete en fait, faut remplacer ca :

par ca :

<img src="index_fichiers/banner_top5_right.gif" alt="top5right" id="right-fyon">

CSS :

#right-fyon {
margin-left:0 !important;
margin-left:-3px;
}

pouff pouff

raphjutras

10 février 2006 à 17:43:57

Hum, merci beaucoup, mais j'ai quand meme reussi a trouver une solution, en passant par plusieurs manieres... Jai mise mon image, hors d'un div et je l'ai transformée en en type BLOCK avec display:block; et je lai faite float:left; et tout fonctionne... mais sa ressemble étrangement à ce que javais déja avant (image entourée dans un div).... entout cas, sa fonctione, et merci pour le conseil, autre maniere de régler ce problème