Problème de marge et de trait dans menu

Problème de marge et de trait dans menu - HTML/CSS - Programmation

Marsh Posté le 07-12-2010 à 00:01:04    

Bonsoir à tous,
 
Je suis en train de faire un petit site, et j'ai un problème sous ie 8 et chrome.  :o  
 
Voici le menu tel qu'il doit s'afficher, et tel que firefox l'affiche :
 
http://img811.imageshack.us/img811/9513/menuffox.png
 
Et voici ce qu'ie8 et chrome affichent :
 
http://img522.imageshack.us/img522/5506/menuie8.png
http://img413.imageshack.us/img413/1142/menuchrome.png
 
Sous IE j'ai donc un problème de double marge, et de traits bizarres, et sous chrome j'ai "juste" les traits bizarres...
 
Au niveau du html j'ai ceci :

Citation :

<ul>
<li><a href="#"/><img src="blabla.jpg" alt="Accueil"/></li>
<li><a href="#"/><img src="blabla.jpg" alt="Nos produits"/></li>
<li><a href="#"/><img src="blabla.jpg" alt="Notre éthique"/></li>
<li><a href="#"/><img src="blabla.jpg" alt="Nos actus"/></li>
<li><a href="#"/><img src="blabla.jpg" alt="Vos avis"/></li>


 
et dans mon css  
 

Citation :

ul {
margin:0;
padding:0;
}
 
li {
display:inline;
margin-right:20px;
}


 
Des idées ? Je me suis gourré quelquepart ?
 
Par avance merci !

Reply

Marsh Posté le 07-12-2010 à 00:01:04   

Reply

Marsh Posté le 07-12-2010 à 10:11:58    

Une idée, au hasard, est que l'image blabla.jpg ne serait pas suffisamment grande dans certains cas.
Pour le savoir, il faudrait essayer avec une image en couleur, ou en mettant une couleur au fond du body :

body {
  margin:0;
  padding:0;
  background:blue;
}

(Et mettre à zéro la margin et le padding d'une manière globale pour le body est une recommandation souvent préconisée pour éviter certains problèmes de compatibilité entre navigateurs).

Reply

Marsh Posté le 07-12-2010 à 11:18:56    

C'est surement les balise <a/> qui sont soulignées
Mets une règle css  

Code :
  1. ul#menu a{text-decoration:none;}


 
Pourquoi ne mets-tu pas les images dans les liens? Là, les liens ne servent à rien.
Sans compter que certains navigateurs n'aiment pas trop la fermeture XML de certaines balises.

Reply

Marsh Posté le 07-12-2010 à 11:21:01    

Ah mais ton HTML est mal formé, il faut que les liens entourent les images :o
 <a> ne peut pas s'écrire <a/>, il lui faut du contenu.


---------------
Blablaté par Harko
Reply

Marsh Posté le 07-12-2010 à 12:23:32    

Problème résolu merci à vous !  :jap:  
 
Je m'étais planté dans mon html, il fallait bien évidemment écrire <li><a href="#"><img src="bla.jpg"/></a></li>
 
Me reste encore le problème de la double marge sous ie (j'ai déjà un reset css  :sweat: )

Reply

Marsh Posté le 07-12-2010 à 13:21:02    

//display:inline sur les LI (n'oublie pas les // devant display)
et hop pb réglé


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed