28173 sujets

CSS et mise en forme, CSS3

voici mon prob,j'ai 1 div "centre" qui contient 1 div "Menu" et 1 div "ContenuBox" placé en float right, mon prob est le suivant (ca saute au yeux)
http://creation-site-internet-pme.net/boiteasucre/cat_produits.asp [/url]
ca marche sous FF mais sous IE j'ai un decalage du background de centre, pouvais vous m'aider?

Voici mon code

<div id="conteneur">
  [B]<!--********la il y a le header avec la benniere, mais bon ca ca marche**-->[/B]
<div id="Centre">
		<div id="ContenuBox">
			<div id="Contenu">
			
		            <h2 class="Titre">Nos Categories de produits</h2>
	                       [B]<!--****mon contenu: c'est de l'ASP avec une boucle qui va chercher du contenu dans une BDD****-->[/B]
	 
			</div>
		</div> 
		

		<div id="Menu">
			<div id="haut">
			
			</div>
		<ul>
			<li><span class="dec_puce"><a href="default.asp">Accueil</a></span></li>
			<li><span class="dec_puce"><a href="historique.asp">Historique</a></span></li>
			<li><span class="dec_puce"><a href="cat_produits.asp">Nos produits</a></span></li>
			<li><span class="dec_puce"><a href="#">Nos servives</a></span></li>
			<li><span class="dec_puce"><a href="realisations.asp">Nos Réalisations</a></span></li>
 		</ul> 
		<span id="menu_contact"><img src="Design/puce_contact.jpg"><a href="contact.asp">     Contact</a></span>	

			<div id="bas">
			
			</div> 
		</div>
		<div class="Nettoyeur"></div> 
	</div>
</div>



et mon CSS:


body {
	margin:0;
	padding:0;
	text-align:center; /* Fix pour IE 6 */
	background-color:#D4D4D4;
	background-image:url(Design/font2.jpg);
	background-repeat:repeat-x;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#Conteneur {
	width:960px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	background-image:url(Design/degrade2.jpg);
	background-repeat:repeat-y;
}
#haut{
	background-image:url(/boiteasucre/Design/menu_gauche.jpg);
	background-repeat:no-repeat;
	width:163px;
	height:100px;
	position:relative;
}
#Menu{
	background-color:#9D364D;
	background-image:url(Design/font_menu-bg2.jpg);
	background-repeat:repeat-x;
	/*float:left;*/
	width:163px;
}
#Menu a {
	color:#FFFFFF;
	text-decoration:none;
}
#Menu a:hover {
	color:#D27F7B;
	
}
#Menu ul li:hover{
	list-style-image:url(/boiteasucre/Design/ptit_sucre_on2.gif);
}
#Menu ul{
	padding-bottom:50px;
	list-style-image:url(/boiteasucre/Design/ptit_sucre2.gif);
	list-style-position:inside;
	
	font-size:13px;
	font-weight:bold;
	color:#FFFFFF;
	margin-left:5px;
}
#Menu li{
	line-height:30px;
}
#Menu li .dec_puce{
	margin-left:5px;
}
#menu_contact{
	margin-left:7px;
	font-weight:bold;
}
#bas{
	background-color:#9C344D;
	width:163px;
	height:120px;
}

#ContenuBox {	
	float:right;
	margin-right:10px;
	margin-top:10px;
	width:744px;
	/*margin-bottom:126px;*/
}
#Centre {
	/*background-color:#D4A09E;*/
	background-image:url(Design/font-center2.jpg);
	background-repeat:repeat-y;
	margin-left:23px;
	margin-right:4px;
}
#Contenu {
	background-image:url(/boiteasucre/Design/coin1.gif);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	padding:12px;
}
#Contenu li{
	list-style-position:inside;
}
#Contenu a{
	text-decoration:none;
	color:black;
}
#Contenu a:hover{
	text-decoration:underline;
}
#Contenu .Titre {
	background-image:url(/boiteasucre/Design/coin2.gif);
	background-repeat:no-repeat;
	background-color:#000000;
	color:#FFFFFF;
	margin:0;
	padding:2px;
	text-align:right;
	font-size:18px;
	font-weight:normal;
	padding-right:12px;
	margin-bottom::6px;
	margin-bottom:10px;
}
.Nettoyeur {
	clear:both;
}


et puis apres il a une div "Footer" avec un image de sucre

le probleme est que il y a un decalageuniquement lorsque j'affiche plusieurs element de ma base,
Autre chose d'interessant, si on enleve le "margin-left:23px;" et le "margin-right:4px;" de la div "#centre" le resulta est identique sur IE et FF.

Voila....j'espere que vous pourrez m'aider
Merci
en fait c'est bon j'ai resolu mon prob, j'ai refait ma maquette et maintenant sa marche je sais pas pourquoi,mais tant mieu Smiley biggrin