Probleme d aligement header et menu sous IE

bonjours a tous, je solicite votre aide pour un petit probleme que je rencontre , je suis en plein apprentissage htlm,css et je rencontre un probleme d allignement sur mon site avec IE sous firefox aucun probleme

tout ce passe entre mon menu et le header un grosse demarquation entre le 2 sous IE je vous laisse l adresse de mon site http://www.ntfrance.org aussi que mon code CSS :

    *  body {
          o margin-top : 0;
          o padding : 0;
          o font-family : Verdana, Arial, Helvetica, sans-serif;
          o font-size : 11px;
          o text-align : center;
          o background-image : url(img/fond.gif);
          o background-repeat : repeat-x;
          o background-color : #424242;
          o color : #000000;
      }
    * #header {
          o width : 780px;
          o height : 150px;
          o margin-top : 0;
      }
    * div#site {
          o background-color : #ffffff;
          o width : 780px;
          o margin : 0 auto;
          o text-align : left;
          o border-left : 1px solid #000000;
          o border-right : 1px solid #000000;
      }
    * ul#menu {
          o width : auto;
          o height : 30px;
          o margin-top : 0;
          o margin-left : 0;
          o padding : 0;
          o background-color : #333333;
          o list-style-type : none;
          o border-bottom : 1px solid #000000;
      }
    * ul#menu li {
          o float : left;
          o border-right : 1px solid #ffffff;
      }
    * ul#menu li a {
          o display : block;
          o line-height : 19px;
          o text-decoration : none;
          o padding : 0 20px;
          o color : #ffffff;
          o font-weight : bold;
      }
    * #menu li a:hover {
          o color : #ffffff;
          o text-decoration : underline;
      }
    * #ts {
          o color : #999999;
          o margin-left : 10px;
      }
    * #ts a {
          o color : #999999;
          o text-decoration : underline;
      }
    * #ts a:hover {
          o color : #000000;
          o text-decoration : overline;
      }
    * #corps {
          o width : 500px;
          o margin : auto;
      }
    * #corps h2 {
          o background-image : url(img/h2.gif);
          o background-repeat : no-repeat;
          o padding-left : 40px;
          o padding-bottom : 10px;
          o padding-top : 10px;
          o font-size : 16px;
          o letter-spacing : 0;
          o color : #ff0000;
          o border-top : 1px solid #ff3300;
          o border-bottom : 1px solid #ff3300;
      }
    * #corps p {
          o margin-left : 17px;
          o margin-right : 17px;
          o margin-top : 5px;
          o margin-bottom : 45px;
          o text-align : center;
          o font-size : 12px;
          o color : #000000;
      }
    * #corps a {
          o font-weight : bold;
          o font-size : 12px;
          o color : silver;
          o text-decoration : none;
      }
    * #corps a:hover {
          o font-weight : bold;
          o font-size : 12px;
          o text-decoration : underline;
      }
    * p#plan {
          o margin-left : 17px;
          o margin-right : 17px;
          o margin-top : 5px;
          o text-align : left;
          o text-decoration : none;
          o font-size : 16px;
          o color : #666666;
      }
    * p#plan a {
          o text-decoration : none;
          o font-size : 16px;
          o color : #666666;
      }
    * p#plan a:hover {
          o text-decoration : underline;
          o font-size : 16px;
          o color : #ff0000;
      }
    * p#plan li a {
          o text-decoration : none;
          o font-size : 16px;
          o color : #666666;
      }
    * p#plan li a:hover {
          o text-decoration : underline;
          o font-size : 16px;
          o color : #ff0000;
      }
    * #footer {
          o width : 750px;
          o margin : auto;
          o text-align : center;
          o background-color : #ffffff;
          o border-top : 1px solid #cccccc;
      }
    * #footer a {
          o color : #666666;
          o text-decoration : none;
      }
    * #footer a:hover {
          o color : #666666;
          o text-decoration : underline;
      }
    * .imgleft {
          o float : left;
      }
    * .imgright {
          o float : right;
      }
    * a.viewpic {
          o position : relative;
          o text-decoration : none;
      }
    * a:hover.viewpic {
          o text-decoration : none;
          o background : none;
      }
    * a.viewpic span {
          o display : none;
      }
    * a:hover.viewpic span {
          o display : inline;
          o position : absolute;
          o top : -80px;
          o left : 140px;
          o z-index : 20;
          o width : 100%;
          o padding : 2px 4px;
      }

merci d avance de votre aide
Modifié par angecris (22 Nov 2006 - 17:45)

Hello et bienvenue ici,

Tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "besoins d'aide".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre

Je te suggère de l'éditer

Bonjour,
Peut être qu'avec "display: block;" dans "<img src="img/header.gif" />.
Cela enlèvera 4px sous cette image.

j edite mon message merci pour l accueil

personne peu me donner un coup de main

Bonjour,

Si gentiment demandé ...

Comme l'a dit papillon41

#header
{
width:780px;
height:150px;

}

#header img
{
width:780px;
display: block;
}

en me servant de ton bloc header qui était tout seul dans son coin et servait à rien ...

	<div id="site">
		<div id= "header">
		<img src="header.gif" alt="logo du site ntfrance.org" />
		</div>
<ul id="menu">

Ca devrait le faire ...