28173 sujets

CSS et mise en forme, CSS3

[Resolu] Affichage bizarre sous Mozilla

Bonjour,

j'ai créé un bandeau de menu toutefois j'ai bloc qui se déplace sous Mozilla, il me crée une marge dans mon bloc header alors qu'il n'y en a pas

upload/13183-menu-css.jpg" alt="upload/13183-menu-css.jpgupload/13183-menu-css.jpg" />

Ci dessous mon code CSS

body{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #fdf9f2 ;
}
			
			
div#conteneur{ /* mon conteneur global avec la bordure */
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #e4d25a ;
	background: #fff ;
}
			
div#header{ /* menu couleurs + le logo + texte sur fond metal */
	height: 69px;
	margin: 0 0 0 0;
}
			
					
div#logo { 
	text-align:right;
	float:right;
	width: 273px;
	height: 69px;
	display:inline;
	background: url(../images/logo_groupe_ibt.jpg) no-repeat;
	position:relative;
	margin-right:7px
}

h1#logo a {
	text-align:right;
	text-indent: -5000px;
	float:inherit;
}
					
div#textetitre { /* texte sur fond metal */
	text-align:right;
	width: 770px ;
	height:22px
	line-height: 22px ;
	font-size: 1.0em ;
	font-weight: bold ;
	letter-spacing: 1px ;
	color:#FFFFFF ;
	display: block ;
	text-decoration: none ;
	background: url(../images/equipements_boulangerie.jpg);	
}
				
			
div#menugauche{ /* bandeau de 3 couleurs */
	width:309px;
	height:69px;
	display:inline;
	position:relative;
	float:left;
}
				
ul#menugauche li{
	text-align: left ;
	list-style-type: none;
}
			
ul#menugauche li a{
	display: block ;
	text-decoration: none ;
	width:inherit;
	text-indent:-5000px;
}
			
a#services{
	background-image: url(../images/s2.png);
	height: 23px;
}
a#services:hover{
	background-image: url(../images/s1.png);
	height:inherit; 
}
				
a#produits{
	background-image: url(../images/p2.png); 
	height: 23px;
	}
a#produits:hover{
	background-image: url(../images/p1.png);
	height:inherit;
	}
a#actualites{
	background-image: url(../images/a2.png); 
	height: 23px;
}
a#actualites:hover{
	background-image: url(../images/a1.png);
	height:inherit
}


voici mon code html

<body>
	<div id="conteneur">	
		<div id="header">
			<div id="menugauche">
				<ul id="menugauche">
					<li><a id="services" href="1.htm">Services</a></li>
					<li><a id="produits" href="2.htm">Produits</a></li>
					<li><a id="actualites" href="3.htm">Actualité</a></li>
				</ul>
			</div>
			
					<div id="logo"><a href="../essai.htm" title="Groupe ibt - lambert - hengel - tibiletti / Accueil"></a></div>
				
		</div>	
		<div id="textetitre">CONSTRUCTEUR 100% FRAN&Ccedil;AIS D'EQUIPEMENTS POUR LA BOULANGERIE-P&Acirc;TISSERIE&nbsp;&nbsp; </div>


quelqu'un pourrait-t-il m'expliquer d'où ça vient, je ne comprends pas Smiley bawling Smiley bawling ?

D'avance merci
Modifié par selinav (13 Jul 2007 - 10:52)
Sujet clos
Aller à