28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Encore et toujours des pbl d'espacement entre ie et ff.

Voir ma page: www.princessedunjour.com

sous ff, les 2 menus sont collés l'un à l'autre.
sous ie, les 2 menus sont espacés verticalement d'au moins 20px...

Quelqu'un peut-il me dire pourquoi ? sans doute des pbls de margin ou de padding, mais je n'ai pas trouvé Smiley confus

voici mon html

<div id="page">
        <h1 id="titre">
        <a href="http://www.princessedunjour.com">
        <img src="logo222.gif" title="Princesse d'un Jour" alt="Princesse d'un Jour" style="vertical-align: middle; margin-right: 50px;" /></a>
        BIJOUX ET ACCESSOIRES POUR LE MARIAGE
        </h1>
		<ul id="menu_langue">
        <li><a id="fr" title="Français" href="accessoires-colliers-mariage.htm">LANGUE : FR</a></li>
		<li><a id="en" title="English" href="accessoires-mariage-bracelets.htm">ENG</a></li>
		</ul>
		<ul id="menu_haut">
        <li><a id="menu1" title="Accueil" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li>
		<li><a id="menu2" title="Collections" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li>
		<li><a id="menu3" title="Design" href="accessoires-boucles-doreilles.htm">DESIGN</a></li>
		<li><a id="menu4" title="Points de vente" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li>
		<li><a id="menu5" title="A propos" href="accessoires-mariage-tiares.htm">A PROPOS</a></li>
		<li><a id="menu6" title="Contact" href="#">CONTACT</a></li>
		<li><a id="menu7" title= "Espace Pro" href="#">ESPACE PRO</a></li>
		</ul> 
  <div id="blocmenugauche">	
	<ul id="menu_gauche">
	<li><a id="menugauche" title="Toute la collection" href="#">TOUTE LA COLLECTION</a></li>
	<li><a title="Perles de rocaille" href="#">PERLES DE ROCAILLE</a></li>
	<li><a title="Cristal Swarovki" href="#">CRISTAL SWAROVSKI</a></li>
	<li><a title="Perles de Bohème" href="#">PERLES DE BOHEME</a></li>
	<li><a title="Fleurs de soie" href="#">FLEURS DE SOIE</a></li>
	<li><a title="Perles nacrées" href="#">PERLES NACREES</a></li>
	<li><a title="Guipure brodée" href="#">GUIPURE BRODEE</a></li>
	</ul>
	<div>
	<a href="#" title="Collection couleurs" id="couleurs">COLLECTION COULEURS</a>
	</div>
  </div>
	<div id="photo_eve">
	<a href="http://www.princessedunjour.com"> <img src="/Evetest.jpg" title="Perles de rocaille" alt="Perles de rocaille"/></a>
	<a href="#" title="Perles de rocaille" id="perles_de_rocaille">Perles de rocaille</a>
  </div>
	<div id="photo_cristal">
	<a href="http://www.princessedunjour.com"> <img src="/Cristaltest.jpg" title="Cristal Swarovski" alt="Cristal Swarovski"/></a>
	<a href="#" title="Cristal Swarovski" id="cristal_swarovski">Cristal Swarovski</a>
    </div>
	<div id="photo_cleopatre">
	<a href="http://www.princessedunjour.com"> <img src="/cleopatre-blanc-test.jpg" title="Perles de Bohème" alt="Perles de Bohème"/></a>
	<a href="#" title="Perles de Bohème" id="perles_boheme">Perles de Bohème</a>
    </div>
	<div id="photo_camelia_tissu">
	<a href="http://www.princessedunjour.com"> <img src="/camelia-tissu-test.jpg" title="Fleurs de soie" alt="Fleurs de soie"/></a>
	<a href="#" title="Fleurs de soie" id="fleurs_de_soie">Fleurs de soie</a>
    </div>
	<div id="photo_estella">
	<a href="http://www.princessedunjour.com"> <img src="/estella-test.jpg" title="Perles nacrées" alt="Perles nacrées"/></a>
	<a href="#" title="Perles nacrées" id="perles_nacrees">Perles nacrées</a>
    </div>
	<div id="photo_guipure">
	<a href="http://www.princessedunjour.com"> <img src="/Guipure-blanc-test.jpg" title="Guipure brodée" alt="Guipure brodée"/></a>
	<a href="#" title="Guipure brodée" id="guipure_brodee">Guipure brodée</a>
    </div>
	<div id="footer">
			<p id="copyright">Copyright © 2005 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.</p>		 
    </div>
</div>	                           
</body>


et css

ul#menu_langue {
padding:0;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
margin-top: 0px;
margin-left: 620px;
margin-right: 0px;
text-align: left;
width: 200px;
}
#menu_langue li {
float: left;
}
#menu_langue a {
display: block;
color: #999999;
text-decoration: none;
text-align: center;
}
#fr {
border-right: 1px solid #999999;
width: 75px;
}
#en {
width: 40px;
}
#menu_langue a:hover {
color: #000000;
}
ul#menu_haut {
padding: 0px;
letter-spacing: 2px;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: left;
width: 750px;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #999999;
text-decoration: none;
text-align: center;
}
#menu1 {
border-right: 1px solid #999999;
width: 85px;
}
a#menu1:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu2 {
border-right: 1px solid #999999;
width: 125px;
background: url(menu2.gif) no-repeat 0 0;
}
a#menu2:hover {
background: url(menu2.gif) no-repeat 0 0;
}
#menu3 {
border-right: 1px solid #999999;
width: 85px;
}
a#menu3:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu4 {
border-right: 1px solid #999999;
width: 150px;
}
a#menu4:hover {
background: url(menu4.gif) no-repeat 0 0;
}
#menu5 {
border-right: 1px solid #999999;
width: 95px;
}
a#menu5:hover {
background: url(menu5.gif) no-repeat 0 0;
}
#menu6 {
width: 85px;
border-right: 1px solid #999999;
}
a#menu6:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu7 {
width: 110px;
}
a#menu7:hover {
background: url(menu7.gif) no-repeat 0 0;
}
#menu_haut a:hover {
color: #000000;
}

Modifié par pp51 (02 May 2007 - 16:14)
Bonjour,

Il manque un margin-bottom:0; à ton menu langue. Smiley cligne
C'est d'ailleurs curieux que ça passe dans Firefox...