18073 sujets

Questions générales et questions de débutants

[résolu] Menu liste avec image problème sur Firefox

Bonjour,

J'ai fait un menu composés de post-it, voici le code HTML :
<div id="menu">
<div class="liens">
<ul id="postit">
<li id="pi">
<a href="index.html"><img src="images/jdb_pi.png" border="0" alt="titre"/></a>
</li>
<li id="txt"><a href="http://hal.local/~Ivy/MORJA/CLV/blog/">Home sweet home</a> &bull;<br /></li>
<li id="txt"><a href="http://hal.local/~Ivy/MORJA/CLV/blog/rss.php?ver=2">RSS 2.0 Feed</a> &bull;<br /></li>
<li id="interlignage"></li>
<li id="pi">
<a href="index.html"><img src="images/good_pi.png" border="0" alt="titre"/></a>
</li>
<li id="pi">
<a href="index.html"><img src="images/gifts_pi.png" border="0" alt="titre"/></a>
</li>
<li id="pi">
<a href="index.html"><img src="images/links_pi.png" border="0" alt="titre"/></a>
</li>
</ul>
</div>
</div>

Et la CSS :
ul#postit li {
	list-style-type: none;
}

li#pi a:link,visited {
	margin: 0px;
	padding:0px;
	border:none;
	list-style-type: none;
}
li#interlignage {
	margin: 8px;
}
li#txt {
	margin-right: 8px;
}
li#txt a:link, 
li#txt a:visited {
	color:#000;
	text-decoration: none;
}
li#txt a:hover{
	color:#000;
	text-decoration: underline;
}


Sur Safari les 3 derniers post-it accolés sont bien collés :
http://ivypearson.free.fr/Barda/safari.png
Mais sour Firefox non Smiley decu :
http://ivypearson.free.fr/Barda/firefox.png

J'ai essayé plusieurs techinque, les mettre en background avec une id chacune, mais je me suis pris la tête aussi, bref si vous aviez une idée ce serait avec plaisir.
Merci
Modifié par Ivy (26 Aug 2005 - 09:42)
Salut,

Dans ta css, tu n'as pas mis à 0 les margin et padding de tes li. Ca pourrait venir de là.
Conseil : détermine de quoi fait partie la zone libre qui te gène, en mettant des fonds ou des bordures à ton ul, tes li et tes liens (ou utilise la web developer toolbar).
Hello,
Merci, mais je crois que les margin/padding:0px; j'ai d le mettre partout lol. Et ça ne change rien, si je mets un fond d'ul noir, j'ai comme une marge entre les li pourtant je l'ai réglé à zéro, c'est comme si Firefox faisait un espace d'office entre les li. Personne n'avait eu se probleme ?
Bien sur ça marche nickel si je les mets en background et que j'écris mon lien par dessus, mais je ne veux pas écrire dessus !!! puisque les titres sont les images.
Smiley sweatdrop
Essaye pour voir de mettre un display:block sur tes <img> et de garder un padding:0 et margin:0 sur tes li, pour voir.
Ca marche, mais les images sont alignés à gauche du coup Smiley murf , je leur ai mis une marge gauche, tout est callé. Merci Smiley smile
Sujet clos
Aller à