28220 sujets

CSS et mise en forme, CSS3

Bug d'affichage étrange sur un menu sous FF

Bonjour,

J'ai un bug d'affichage étrange sur les codes ci-dessous. Sur IE, par de problème, le menu reste en place. Par contre, sous FF, le menu "remonte" en absolute de 100px environs. Il suffit que je rafraichississe pour qu'il se remtte en place. Comprendeis ?

<div id="pied3">
				  				  		<ul>
				  <li><h2><a class="menu1" href="bla.php">bla</a></h2></li>
				  <li><h2><a class="menu2" href="bla.php">bla</a></h2></li>
				  <li><h2><a class="menu3" href="bla.php">Les bla'</a></h2></li>
				  <li><h2><a class="menu4" href="bla.php">Les bla</a></h2></li>
				  </ul>
				  </div>
				  <div id="pied2">
				  						  	<ul>
					  	<li><h3><a href="bla.php">Devenez Gérant bla</a>&nbsp;|&nbsp;</h3></li>
						<li><h3><a href="#">Conditions Générales de Vente</a>&nbsp;|&nbsp;</h3></li>
						<li><h3><a href="#">Données Personnelles</a>&nbsp;|&nbsp;</h3></li>
						<li><h3><a href="#">Mentions Légales</a></h3></li>
                  		</ul>
				  </div>

#pied2 {clear:both;width:770px; height: 20px;background: #fff;}
        #pied2 ul {margin:5px 0 0 80px;}
        #pied2 li {float:left;}
        #pied2 h3 {margin:0;padding:0;color:#E98945;}
        #pied2 a {color:#E98945;text-decoration:none;}
        #pied2 a:hover {text-decoration:underline;}
    


#pied3 {clear:both;width:100%; height: 31px;background: #FDA968 url(images/haut.gif);}
#pied3 ul {margin:5px 0 0 20px;}
    #pied3 li {float: left;margin:8px 0 0 0px;}
	*html #pied3 li {float: left;margin:3px 0 0 0px;}
    #pied3 li a {position: absolute;display: block;font-size: 11px;text-decoration:none;
        font-weight: bolder;color: #eee;text-align: center;cursor: hand;}
        #pied3 li a.menu1 {margin:0 0 0 10px;width:92px;height:20px;background: url(images/ssmenubas2.gif) no-repeat;}
        #pied3 li a.menu2 {margin:0 0 0 115px;width:92px;height:20px;background: url(images/ssmenubas2.gif) no-repeat;}
        #pied3 li a.menu3 {margin:0 0 0 220px;width:92px;height:20px;background: url(images/ssmenubas2.gif) no-repeat;}
		#pied3 li a.menu4 {margin:0 0 0 325px;width:92px;height:20px;background: url(images/ssmenubas2.gif) no-repeat;}

Modifié par kuvett (30 Jun 2005 - 17:54)
Modérateur
Salut, Smiley smile

D'après tes codes, on ne sait pas de quel menu tu parles...

Ceci mis à part, j'aurais tendance à penser qu'il s'agit d'un problème dû à la sémantique...

Comment çà réagit si tu écris tes codes comme suit?
<ul id="pied3">
	<li><h2><a class="menu1" href="bla.php">bla</a></h2></li>
	<li><h2><a class="menu2" href="bla.php">bla</a></h2></li>
	<li><h2><a class="menu3" href="bla.php">Les bla'</a></h2></li>
	<li><h2><a class="menu4" href="bla.php">Les bla</a></h2></li>
</ul>
<ul id="pied2">
	<li><h3><a href="bla.php">Devenez Gérant bla</a> | </h3></li>
	<li><h3><a href="#">Conditions Générales de Vente</a> | </h3></li>
	<li><h3><a href="#">Données Personnelles</a> | </h3></li>
	<li><h3><a href="#">Mentions Légales</a></h3></li>
</ul>
#pied2 {
	clear: both;
	width: 770px;
	height: 20px;
	background: #fff;
	margin: 5px 0 0 80px; }
#pied2 li {
	float: left;}
#pied2 h3 { margin: 0;
	padding: 0;
	color: #E98945; }
	#pied2 a {
	color: #E98945;
	text-decoration: none; }
#pied2 a:hover {
	text-decoration: underline; }
#pied3 {
	clear: both;
	width: 100%;
	height: 31px;
	background: #FDA968 url(images/haut.gif);
	margin: 5px 0 0 20px; }
#pied3 li {
	float: left;
	margin-top: 8px; }
*html #pied3 li {
	margin-top:3px; }
#pied3 a {
	position: absolute;
	display: block;
	font-size: 11px;
	text-decoration: none;
	font-weight: bolder;
	color: #eee;
	text-align: center;
	cursor: hand; }
#pied3 .menu1, #pied3 .menu2, #pied3 .menu3, #pied3 .menu4 {
	width: 92px;
	height: 20px;
	background: url(images/ssmenubas2.gif) no-repeat; }
#pied3 .menu1 {
	margin-left: 10px; }
#pied3 a.menu2 {
	margin-left: 115px; }
#pied3 a.menu3 {
	margin-left: 220px; }
#pied3 a.menu4 {
	margin-left: 325px; }
Sujet clos
Aller à