28220 sujets

CSS et mise en forme, CSS3

Bonjour a tous

Voila j'ai un petit probleme de decallage sous IE et firefox (enfin ils sont differents sous ces 2 navigateurs)
http://www.kiway.net/html/index2.htm voici la page

Le decallage apparait sous firefox au niveau du menu...

voici mes 2 codes:
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background:#4E7D3E;
}


#conteneur {
position: absolute;
width: 740px;
left: 50%;
margin-left: -375px;
background-color:#D0F4F1;

}

#header {
	width:733px;
	height:124px;
	margin: auto;
	background-color: #FF0000;
}

/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basdroit, #basgauche {
height: 5px; width: 5px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(images/haut_gauche.gif);
}
#hautdroit {
float: right;
background: url(images/haut_droit.gif);
}
#basgauche {
float:left;
background: url(images/bas_gauche.gif);
}
#basdroit {
float: right;
background: url(images/bas_droit.gif);
}

#pub{
width:468px;
height:60px;
margin-right: 10px;
margin-top: 10px;
float: right;
}

#menu
{
	float:left;
	width: 150px;
	margin-left: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #0E5856;
	margin-top: 3px;

}
#milieu
{
	margin-left: 155px;
	width: 570px;
	margin-top: 3px;
}
.menu {

font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.3em;
text-align: left;
color: #0E5856;
font-weight: bold;
}
ul,li {
list-style-type: none;
margin: 0;
padding:0;
line-height: 22px;
margin-left: 8px;
}
h1 {
color: #FFFFFF;
background-color: #21CAC6;
padding-left: 10px;
font-size: 15pt;
letter-spacing: 2px;
margin-right: 5px;
}

.separateur{
	border-bottom-color: #21CAC6;
	border-bottom-style: solid;
	border-bottom-width: 10px;

}
h2 {
	border-bottom-color: #21CAC6;
	border-bottom-style: solid;
	border-bottom-width: 4px;
	padding-bottom: 2px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: medium;
	text-align: left;
	color: #0E5856;
	font-weight: bold;
	margin-right: 10px;
}


.items_menu{
	font-weight: bold;
	font-size: 0.9em;
	margin-left: 7px;

	vertical-align: 5px;
}
#presence
{
	width: 130px;
	margin-top: 5px;
	margin-left: 5px;
	text-align: center;
	font-style: italic;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="conteneur">
	<div id="hautdroit" ></div> <div id="hautgauche"></div>

		<div class="separateur" id="header">
		  <div id="pub"><img src="images/pub.gif" width="468" height="60" /></div>
  </div>

		 
		<div id="menu">
			<h1>Menu</h1>
			<h2><br />
            </h2>	  
  
			  <h2> </h2>
            <ul class="menu">
			<li>Menu 1</li>
			</ul>
		</div>

  <div id="milieu">
		<h1>Titre</h1>
		<br />
<br />

		         <br />
		  <br />

		  <br />
		  <br />
		  <br />
		  <br />
		

  </div>
		<div style="clear:both; "></div>
		
		
	<div id="basgauche"></div> <div id="basdroit" ></div>
</div>


</body>
</html>

Modifié par comicway (29 Mar 2005 - 18:00)
Salut

Je pense qu'il faut que tu forces la supressions des marges pour les balises <Hx/> sous firefox.

H1 {
	PADDING-LEFT: 10px; FONT-SIZE: 15pt; COLOR: #ffffff; [b]MARGIN: 0 5px 0 0;[/b] LETTER-SPACING: 2px; BACKGROUND-COLOR: #21cac6;

}