Sujet Précédent Sujet Suivant

Menu <li>: Taille qui augment sous IE

Résolu/Fermé
vanzielle Messages postés 16 Date d'inscription mercredi 20 octobre 2010 Statut Membre Dernière intervention 19 janvier 2013 - Modifié par vanzielle le 13/12/2011 à 22:04
vanzielle Messages postés 16 Date d'inscription mercredi 20 octobre 2010 Statut Membre Dernière intervention 19 janvier 2013 - 13 déc. 2011 à 23:34
Bonjour,

Le titre en dit une grande partie.
Je vous explique mon problème.

Je suis sous chrome ou FireFox lorsque je clique sur mon bouton de menu tout se passe bien tout reste aligné.
Sous IE, j'arrive sur la page tout les boutons du menu sont au bon endroit. Je clique sur l'un d'eux et la c'est la catastrophe brutalement le bouton sur lequel je clique se déplace.

Afin de savoir ce qui se passait j'ai mit un background-color different pour chacun des <li> de mes boutons. Et en effet d'un coup la zone de couleur du <li> se voit a l'ecran. Comme la taille du <li> en largeur comme en hauteur augmente, trés rapidement mes autres boutons se retrouvent a la ligne en dessous.


Mon doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mon code Html: 
  <div id="header">  
   <img src="background-menu-opac.png" alt="Fond transparent" id="fond-menu" />  
   <div id="menu">  
    <div id="logo">  
     <img src="logo.png" alt="Logo TheFactory" />  
    </div>  
    <ul>  
     <li style="background-color:red;"><a href="#cont1" id="move1" class="text-menu-style" title="Aller au contenu 1">  
      <img src="fb.png" id="img1" alt="Engrenage-menu" /><span class="pos-text-button1 typo-button">QUI SOMMES NOUS ?</span></a>  
     </li>  
     <li style="background-color:blue;"><a href="#cont2" id="move2" class="text-menu-style" title="Aller au contenu 2">  
      <img src="fb.png" id="img2" alt="Engrenage-menu" /><span class="pos-text-button2 typo-button">CONCEPT</span></a>  
     </li>  
     <li style="background-color:cyan;"><a href="#cont3" id="move3" class="text-menu-style" title="Aller au contenu 3">  
      <img src="fb.png" id="img3" alt="Engrenage-menu" /><span class="pos-text-button3 typo-button">EQUIPE</span></a>  
     </li>  
     <li style="background-color:green;"><a href="#cont4" id="move4" class="text-menu-style" title="Aller au contenu 4">  
      <img src="fb.png" id="img4" alt="Engrenage-menu" /><span class="pos-text-button4 typo-button">CONTACT</span></a>  
     </li>  
    </ul>  
   </div>  
  </div>


Et mon code css: 
#menu{  
 position: fixed;  
 z-index: 5;  
 height: 202px;  
 width: 900px;  
 text-align: center;  
 margin: auto;  
 color: black;  
}  

#menu ul{  
 padding:8px 0;  
 width: 270px;  
 height: 80px;  
 margin:0;  
 margin: 70px 300px 0px 0px;  
 display:block;  
 float:right;  
}  

#menu li{  
 margin:0px 0px 0px 15px;  
 padding:15px 0px 0px 0px;  
 display: inline;  
 list-style-type: none;  
 float: left;  
}  

#menu ul img{  
 height:50px;  
 width:50px;  
}  

#logo img{  
 float: left;  
}  

.text-menu-style{  
 text-decoration: none;  
 color: black;  
}  

/* CSS DOCUEMENT */ 

.pos-text-button1{ 
 position: absolute; 
 margin: 10px 0px 0px -100px; 
} 

.pos-text-button2{ 
 position: absolute; 
 margin: 10px 0px 0px 90px; 
} 

.pos-text-button3{ 
 position: absolute; 
 margin: 10px 0px 0px 259px; 
} 

.pos-text-button4{ 
 position: absolute; 
 margin: 10px 0px 0px 385px; 
} 

#img1{ 
 position: absolute; 
 margin: 30px 0px 0px -50px ; 
} 

#img2{ 
 position: absolute; 
 margin: 30px 0px 0px 105px ; 
} 

#img3{ 
 position: absolute; 
 margin: 30px 0px 0px 260px ; 
} 

#img4{ 
 position: absolute; 
 margin: 30px 0px 0px 400px ; 
}


Merci pour votre aide.
Je suis au désarroi cela fait 4h que je me prend la tête avec ce menu sous IE...

Cordialement,
Vanzielle

PS: EDIT: Ajout de code css que j'avais oublié.
A voir également:

6 réponses

Réponse 1 / 6
cobof74 Messages postés 93 Date d'inscription lundi 12 décembre 2011 Statut Membre Dernière intervention 20 février 2012 12
Modifié par cobof74 le 13/12/2011 à 22:06
(Désolé mauvaise réponse.. je retire)
0
Réponse 2 / 6
vanzielle Messages postés 16 Date d'inscription mercredi 20 octobre 2010 Statut Membre Dernière intervention 19 janvier 2013 1
13 déc. 2011 à 22:08
C'est effectivement le cas mes favoris dont sous FF. J'ai déjà essayer cette option sur un de mes pc mais cela n'a rien changer :/
0
Réponse 3 / 6
cobof74 Messages postés 93 Date d'inscription lundi 12 décembre 2011 Statut Membre Dernière intervention 20 février 2012 12
13 déc. 2011 à 22:13
pas un petit souci avec internet explorer derniere generation? Je sais qu'un ami webmaster me disait que à partir de la version 8 c'était le souc pour afficher correctement les sitesqu'il créait. Sinon désolé je n'ai pas les compétences nécessaires.. Je suis spécialisé réseau, non web...
0
Réponse 4 / 6
vanzielle Messages postés 16 Date d'inscription mercredi 20 octobre 2010 Statut Membre Dernière intervention 19 janvier 2013 1
13 déc. 2011 à 22:30
Je le teste sous version 7, 8 et 9 et il me fait cela sur toute les version de ie :'(
Sinon je croi avoir localiser le bout de code qui pose probleme cela viendrait de mon css 
#img1{
	position: absolute;
	margin: 30px 0px 0px -50px ;
}

#img2{
	position: absolute;
	margin: 30px 0px 0px 105px ;
}

#img3{
	position: absolute;
	margin: 30px 0px 0px 260px ;
}

#img4{
	position: absolute;
	margin: 30px 0px 0px 400px ;
}


Je suppose que c'est la position: absolute; qui casse tout.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
cobof74 Messages postés 93 Date d'inscription lundi 12 décembre 2011 Statut Membre Dernière intervention 20 février 2012 12
13 déc. 2011 à 22:53
Si je me trompe pas, en position relative il gardera la même place dans le document n'est ce pas? Peut être tu devrais creuser ceci.
0
Réponse 6 / 6
vanzielle Messages postés 16 Date d'inscription mercredi 20 octobre 2010 Statut Membre Dernière intervention 19 janvier 2013 1
13 déc. 2011 à 23:34
La position relative n'a pas fonctionner j'avais toujours mon menu en escalier. Cependant, je viens de trouver la solution.
J'ai retirer le positionement absolue de mes images pour le mettre sur les <li>. J'ai egalement defini une width pour chacune de mes <li> spécifique en fonction du texte inclut dedans. Je gere ensuite la position du contenue de mes <li> avec des marges.
Ce qui nous donne le code suivant:

html: 
			<div id="menu">
				<div id="logo">
					<img src="logo.png" alt="Logo TheFactory" />
				</div>
				<ul>
					<li id="li-img1"><a href="#cont1" id="move1" class="text-menu-style" title="Aller au contenu 1">
						<img src="fb.png" id="img1" alt="Engrenage-menu" /><span class="pos-text-button1 typo-button">QUI SOMMES NOUS ?</span></a>
					</li>
					<li id="li-img2"><a href="#cont2" id="move2" class="text-menu-style" title="Aller au contenu 2">
						<img src="fb.png" id="img2" alt="Engrenage-menu" /><span class="pos-text-button2 typo-button">CONCEPT</span></a>
					</li>
					<li id="li-img3"><a href="#cont3" id="move3" class="text-menu-style" title="Aller au contenu 3">
						<img src="fb.png" id="img3" alt="Engrenage-menu" /><span class="pos-text-button3 typo-button">EQUIPE</span></a>
					</li>
					<li id="li-img4"><a href="#cont4" id="move4" class="text-menu-style" title="Aller au contenu 4">
						<img src="fb.png" id="img4" alt="Engrenage-menu" /><span class="pos-text-button4 typo-button">CONTACT</span></a>
					</li>
				</ul>
			</div>



css: 
.pos-text-button1{
	position: absolute;
	margin: 10px 0px 0px -105px;
}

.pos-text-button2{
	position: absolute;
	margin: 10px 0px 0px -60px;
}

.pos-text-button3{
	position: absolute;
	margin: 10px 0px 0px -55px;
}

.pos-text-button4{
	position: absolute;
	margin: 10px 0px 0px -65px;
}

#img1{
	margin: 30px 0px 0px 20px ;
}

#img2{
	margin: 30px 0px 0px 5px ;
}

#img3{
	margin: 30px 0px 0px 0px ;
}

#img4{
	margin: 30px 0px 0px 50px ;
}

#li-img1{
	width: 180px;
	position: absolue;
}

#li-img2{
	width: 175px;
	position: absolue;
}

#li-img3{
	width: 160px;
	position: absolue;
}

#li-img4{
	width: 80px;
	position: absolue;
}


Suis-je le seul à trouver que mon code est immonde ? :p

Il me reste plus que un ptit bout de texte qui se place pas la ou je veux mais se sera vite régler.

Merci pour votre aide et bonne soirée.
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
Chanson la li la li la la la?
blue44650 -
Coutelier -

2 réponses