Aller au contenu

Problème étrange sous firefox/opéra


Pistil

Sujets conseillés

Bonjour, bonjour,

premier post de ma part sur le forum (d'habitude je trouve tout seul confused ).

voci mon (mes) problème(s).

J'ai créé un menu en liste <ul> très simple, celui fonctionne "au poil" sur tous les navigateurs, mais au moment d'intégrer un sous menu à la rubrique agenda, le sous menu s'avère passer derrière le contenu. D'ou mon scepticisme. J'ai bien essayé de modifier le z-index, sans effet.

Sous Opera le problème est différent, en effet les dernières lettres de chaque mot de ma lsite disparait pour une raison étrange (enfin moi jtrouve ça étrange...)

voila le code xhtml:




<div id="center">

<div id="colonne">

<div id="menu">

<ul>

<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> presentation </a></span>

</li>

<li><span class="menu_current"><a href="#" target="_top" class="menu_current"> nos produits </a></span>



</li>

<li><span class="menu_default"><a href="#" onmouseover = "document.getElementById('menu_14').style.display='block'"

onmouseout = "document.getElementById('menu_14').style.display='none'" target="_top" class="menu_default"> agenda </a></span>

<ul id='menu_14' onmouseover = "this.style.display='block'"

onmouseout = "this.style.display='none'">

<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> concerts </a></span>

</li>

<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> diner spectacles </a></span>

</li>

</ul>

</li>

<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> nous recherchons </a></span>



</li>

<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> votre avis </a></span>

</li>

<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> contact </a></span>

</li>

<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> partenaires </a></span>

</li>

</ul>

</div>

</div>

<div id="contenu">

<fieldset>

<legend><b>

<!-- titre --> </b>

</legend>

<!--Contenu-->

</fieldset>

</div>

</div>

et voici mon code CSS pour le menu:



/*_____Menu___________________________________________________________________*/

#menu{

z-index:900;



}

#menu ul{

margin: 0;

padding:0;

overflow:hidden;

}

#menu li{

list-style-type:none;

margin: 0;

padding:0;

font-size:0;



border:1px solid #E5E4A1;

}

#menu li a{

width:120px;



display:block;

position:relative;

text-align:left;

padding:0px 5px;

margin-left:7px;

color:#000;

font-size:13px;

font-weight:bold;

line-height:20px;

letter-spacing:1px;

text-decoration:none;

}

#menu li a:first-letter{

text-transform:uppercase;

font-size:14px;

}

#menu li a:hover{

background:#293416;

color:#fff;

}

#menu li .menu_current{

background:#DCDB8B;

color:#D20D17;

}

#menu ul li ul {

display:none;



cursor:pointer;

z-index:1000;

margin-left:110px;

margin-top:-20px;

position:absolute;

}

#menu ul li ul li{

background:#DCDB8B;

border:1px solid #E5E4A1;

color:#fff;

margin-top:-1px;

width:140px;

}

#menu ul li ul li span{



}

#menu ul li ul li a{

display: block;

width:100%;

}

#menu ul li ul li a:hover{

display: block;

width:100%;



color:#fff;

}

#menu ul li ul li .menu_current:hover{

color:#fff;

}

Bon alors là je ne vois pas du tout d'ou viennet ces problèmes. Siseulement qqu'un a une idée.

Je fais suivre l'url :http://crocobar.fr/pages/nos-produits.php

Un grand merci d'avance cligne

Lien vers le commentaire
Partager sur d’autres sites

Bonjour, bonjour, par cette belle journée de printemps, je vous annonce donc à tous que les problèmes sous opéra et firefox sont résolus (héhé..)

-Firefox -> #menu = position:absolute;

-Opéra ->letter-spacing non supporté.

Et là... et là.. haha la bonne blague, ça ne passe plus sous IE (ni le 5 ni le 6 ni le 7)

(le menu est coupé sur la droite et ne dépasse plus de la <div> en position:absolute;)

Alors j'avoue qu'un peu d 'aide serait la bienvenue, en vous remerciant;)

pavel ++

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...