[RESOLU] Decalage d'un div ul dans IE

Salut à tous,

j'ai un probleme classique je pense, mais je parviens pas a le resoudre.

Mon menu est construit normalement dans une liste qui est dans un div.

Sa position varie en hauteur sur IE...sur ffox sa position est celle voulue.

Pour voir

La partie HTML

	
<div id="navigation">
<ul>
<li><a title="Accueil" accesskey="9" href="#">Accueil</a><span class="nav">&nbsp;&nbsp;&nbsp;|</span></li>

<li>&nbsp;&nbsp;<a title="Web" accesskey="4" href="./pages/web.html#">Web</a><span class="nav">&nbsp;&nbsp;&nbsp;|</span></li>
<li>&nbsp;&nbsp;<a title="Print" accesskey="4" href="./pages/print.html#">Print</a><span class="nav">&nbsp;&nbsp;&nbsp;|</span></li>
<li>&nbsp;&nbsp;<a title="Graphismes" accesskey="3" href="./pages/graph.html#">Graphismes</a><span class="nav">&nbsp;&nbsp;&nbsp;|</span></li>
<li>&nbsp;&nbsp;<a title="Mon C.V" accesskey="8" href="./pages/cv.html#">C.V</a></li>

</ul>
</div>

la partie CSS

					                             /* M E N U */

div#navigation {  position: absolute; 
				top: 41px; 
				left: 141px; 
				margin: 0; 
                padding: 0;					
				z-index: 180;   
			    height: 83px;  }
			  
div#navigation ul li { display: inline; margin:0; padding: 0; }	
		  
			   
					              /* LIENS DU MENUS*/  
div#navigation ul li a     {  
	            color:#68685d ; 
	            padding: 0; 
				margin:0;
				text-decoration: none; 
				font-family: Tahoma, Arial, Helvetica, sans-serif; 
				font-weight: normal; 
				font-size: 12px; 
				letter-spacing: 1px;}

div#navigation ul li  a:hover {color: red; 
            padding: 0; 
			margin:0;
			text-decoration: none; 
			font-family: Tahoma, Arial, Helvetica, sans-serif ;
			font-weight: normal; 
			font-size: 12px; 
			letter-spacing: 1px;}
			
.nav {       font-family: Tahoma, Arial, Helvetica, sans-serif; 
			font-weight: normal; 
			font-size: 12px; 
			letter-spacing: 1px;
			color: #b3b9ab;
			margin:0;
			padding: 0;	}	

Merci de votre aide.
Modifié par Hum (31 May 2006 - 11:43)

Les balises vides ont des bgrounds attribués en CSS, et en effet l'imbrication et/ou la construction du header est surement pas correcte.
Merci !

edit :

Rien à faire, meme tout seul dans la page mon menu est toujours decalé vers le haut dans I.E, j'ai finis par soupsonner mes span avec une class qui contiennent des | pour separer mes liens de menus, je les ai virer aussi et rien ne bouge.

Je vois toujours pas...

Voilà le css du menu

			                             /* M E N U */
div#navigation {  position: absolute; 
				top: 41px; 
				left: 141px; 
				margin: 0; 
                padding: 0;					
				z-index: 180;   
			    height: 83px;  }
			  
div#navigation ul li { display: inline; margin:0; padding: 0; }	
		  
			   
					              /* LIENS DU MENUS*/  
div#navigation ul li a     {  
	            color:#68685d ; 
	            padding: 0; 
				margin:0;
				text-decoration: none; 
				font-family: Tahoma, Arial, Helvetica, sans-serif; 
				font-weight: normal; 
				font-size: 12px; 
				letter-spacing: 1px;}

Modifié par Hum (30 May 2006 - 22:46)

Salut Hum...
En fait, ton problème survient au niveau de l'élément #navigation ul li...
Pour t'en convaincre, fais un aperçu avec ces propriétés :

div#navigation {  
position: absolute; 
top: 41px; 
left: 141px; 
margin: 0; 
padding: 0;					
z-index: 180;   
height: 83px; 
[b]background : yellow;[/b] }
  
div#navigation ul li { 
display: inline; 
margin:0; 
padding: 0;
[b]background : blue; [/b]}

La raison ?
Tu n'as tout simplement pas réinitialisé les marges internes et extrenes de ta liste <ul> à 0 ...
Et IE n'affecte pas les même valeurs à ces éléments que les autres navigateurs.
La solution est donc de rajouter ceci à ton code pour voir ton problème résolu :

div#navigation ul{         
padding: 0; 
margin:0;
}

Passe une bonne journée,
Corinne
Modifié par Cygnus (31 May 2006 - 10:10)

De rien...
Ravie d'avoir pu t'aider !

Concernant l'image "title_header2.jpg", tu constateras que sous FF, elle n'apparait pas entièrement, d'ailleurs tu noteras également qu'il y a un élément d'arrière-plan qui apparait en-dessous de ton div général sous IE.




Sinon, en ce qui concerne ton agencement CSS, plutôt que de garder cette structure (ça me parait bien bancale) :

body {  			
position: absolute;
padding: 0 ; 
top: 50%;
left: 50%;
width: 1000px;
height: 590px;
margin: -295px 0 0 -500px;			
}

div#global {
position: relative;
top: 0;
left: 0;
width: 1000px;
height: 590px;
border: 1px solid #413d34;
margin: 0 ; 
padding:0;
background-color: white;
}

Pourquoi ne pas mettre tout simplement :

div#global {  			
position: absolute;
padding: 0 ; 
top: 50%;
left: 50%;
width: 1000px;
height: 590px;
margin: -295px 0 0 -500px;
border: 1px solid #413d34;			
}

Tu devrais arriver au même résultat je pense
Voilà...
Modifié par Cygnus (31 May 2006 - 14:39)