[résolu] Menu (ul) invisible via FF...

bonjour à tous,
voila plusieurs heures que j'essaye de me sortir de ce "trou"!
j'ai donc un menu contenu dans un div qui lui aussi est contenu dans un div.

Mon menu est horizontal, il est constitué d'images "accolées" qui forment une suite formant une image logique.
Le probleme est juste que ça ne s'affiche pas du tout sur Firefox, alors que sous IE tout fonctionne parfaitement...

je vous passe mon code :

CSS

#header {				 
padding: 0px; margin: 0 auto;
width: 739px; height: 180px;
background: url('design/header.jpg');
} 	 

#menu {
	text-align: right;
	padding-top: 109px;
	padding-right: 52px;
}

#menu ul {	
	list-style: none;  
	padding: 0px;
	margin: 0 auto;
} 
 
#menu li {
	display: inline; 
	line-height: 39px;			  
}

#menu ul li a#portfolio { 
background-image: url('design/menu_normal_portfolio.jpg');
height: 39px; width: 104px;
}

#menu ul li a#infos {		 
background-image: url('design/menu_normal_informations.jpg');
height: 39px; width: 104px;
}

#menu ul li a#contact {		 
background-image: url('design/menu_normal_contact.jpg');
height: 39px; width: 86px;
}

HTML

<div id="parent">
<div id="header">  


<div id="menu">
<ul>
<li><a id="portfolio" href="portfolio.php"></a></li>
<li><a id="infos" href="portfolio.php"></a></li>
<li><a id="contact" href="portfolio.php"></a></li>
</ul>
</div>	   


</div><!--fin header-->
<div id="content">
</div>		 

<div id="footer">
</div>
		  

</div>

et enfin un aperçu

IE:
http://internet.umour.free.fr/ie.jpg

FF:
http://internet.umour.free.fr/ff.jpg



je vous remercie par avance de votre éventuelle aide
Modifié par rounet (25 Dec 2008 - 10:26)

j'ai réussi d'une manière un peu fastidieuse, c'est en utilisant les balises "img" : cela fonctionne mais bon...

<li><a id="portfolio" href="portfolio.php"><img src="design/menu_normal_portfolio.jpg" border="0" width="104" height="39" alt=""></a></li>
<li><a id="infos" href="portfolio.php"><img src="design/menu_normal_informations.jpg" border="0" width="104" height="39" alt=""></a></li>
<li><a id="contact" href="contact.php"><img src="design/menu_over_contact.jpg" border="0" width="86" height="39" alt=""></a></li>

Voici la solution après une nuit blanche pour noel ! lol
grace à un tutorial sur le net (http://css.mammouthland.net/menu_horizontal_css.php)

j'ai en fait utilisé la proprieté float:left pour le <li> puis sur le lien du "li" j'ai utilisé un display:block et float:left également.

voilà voilà si ça peut aider

Hello rounet,

C'est un peu dommage d'avoir passé une nuit blanche sur ce menu le soir de noel
Quelques remarques en vrac :
Il est d'usage pour ce type de menu de mettre les images (porteuses de sens) directement dans le code html et de s'occuper d'éventuels effets via javascript, sans omettre une alternative textuelle concise et explicite (attribut alt décrivant l'information véhiculée par l'image) de sorte que si la feuille de styles est désactivée, inaccessible, non souhaitée, si les images sont désactivées, inaccessibles, non souhaitées, si la navigation se fait sans lecteur graphique...ton lien puisse tout de même être accessible.
Ce qui n'est pas le cas avec ton premier code (quid du code produit avec le tutoriel de mammouthland ?...)
Bref, à revoir en terme d'accessibilité

Tu peux également t'affranchir du <div id="menu"> a priori inutile :

<ul id="menu">
<li><a href=""><img src="img1" alt="description qui va bien" height="" width="" /></a></li>
<li><a href=""><img src="img2" alt="description qui va bien" height="" width="" /></a></li>
<li><a href=""><img src="img3" alt="description qui va bien" height="" width="" /></a></li>
</ul>

Remplira parfaitement son rôle (penser à adapter les styles css)

Bonnes fêtes de fin d'année,
Cdt,
Sylvain
Modifié par 6l20 (26 Dec 2008 - 12:13)

merci beaucoup pour ces explications, j'aime beaucoup l'esprit critique c'est comme cela qu'on avance
j'aurais juste une question au passage, les sauts de ligne se font toujours par <br> ou est-ce "obselète" ? je vais chercher en meme temps.
encore merci sylvain

Bonjour rounet,

Voici pour la documentation

Cdt,
Sylvain

rounet a écrit :
les sauts de ligne se font toujours par <br> ou est-ce "obselète" ?

BR n'est pas obsolète, mais son utilisation à tout va n'est pas conseillée. Si le retour à la ligne est esthétique, on pourra éventuellement le gérer en CSS en passant les divers éléments en display: block.