Probleme de positionnement sous FireFox.

Question

gregory_nord

7 Oct 2008 à 13:26

Bonjour a tous,

voila j ai un petit probleme de positionnement sur FF concernant mon h2, en effet si sous IE le h2 respecte bien le margin-top, sur FF il ne le prend pas en compte et colle le h2 directement sur le haut du contenu.

j espere que vous me comprenez.
je vous joins la feuille html et css.

Si vous pourriez m'aider cela serait vraiment sympa.

merci d'avance !

le html


<!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=utf-8" />
<title>le yoga</title>

<noscript>
	Attention, JavaScript étant désactivé vous ne pourrez bénéficier
	de toutes fonctionnalités de cette page
</noscript>


<?php include('inc/inc.style.php'); ?>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

</head>

<body>

<div id="site">

<!--entete-->
<div id="entete">
<p>entete</p>
</div>
<!--fin entete-->


<!--contenu-->
<div id="contenu">
<?php include('inc/inc.menu.php'); ?>

<div id="texte2">

<h2>Le Yoga</h2>
<p>Le Hatha Yoga est une pratique d’exercices physiques associé au souffle pour apaiser les tensions. Il aide le corps à être vivant et en bonne santé, à discipliner le mental en étant clair et attentif.</p>

<p>Ces pratiques tendent par une prise de conscience progressive à l’harmonisation des facultés corporelles, affectives et mentales.
Pratiquer des postures et des respirations dans un état de détente et de concentration avec conscience et respect des limites de son corps conduit à une auto-gestion de son potentiel physique et psychique.</p>
<p>Les effets se traduisent d’abord par un mieux être, une plus grande disponibilité, une meilleure efficacité dans l’action.
Le Yoga n’est pas une thérapie, ses limites s’arrêtent à la pathologie qui demande d’un praticien de santé diplômé. Il n’est pas non plus seulement une gymnastique.
L’Inde est la référence culturelle du yoga; son approche contemporaine s’appuie toujours sur des textes classiques ( comme les yoga-sutras ou la Bhagavad Gita).</p>
<img src="images/5372-133.jpg" alt="yoga" class="yoga"/>

<p>Il n’a rien à voir avec des déformations sectaires; il n’offre aucune réponse toute faite, il n’est pas la sagesse mais une préparation à celle-ci. Il s’oppose au matérialisme ambiant en développant certaines qualités d’ouverture et de sensibilisation aux aspects fondamentaux de la condition humaine ( sens de la vie, confrontation avec la mort…).
Le Yoga signifie: union, rassemblement; l’union du corps au mental par l’intermédiaire du souffle. Il maintient une certaine harmonie, une bonne concentration, une habilité dans l’action, la mesure en toute chose, avec une attitude d’acceptation des obstacles et un lâcher-prise. Il donne l’énergie nécessaire pour trouver une solution mais sans attendre de récompense, les fruits de l’action.</p>
</div>
</div>
<!--fin contenu-->


<!--pied page-->
<div id="pied">
<?php include('inc/inc.pied.php'); ?>
</div>
<!--fin pied page-->


</div>

</body>
</html>

le css


@charset "utf-8";
/* CSS Document */

/* Reset */
* {
margin: 0;
padding: 0;
border: 0;
}
/* fin reset*/

/*parametre general*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color:#999999;
text-align: center;
}
/* fin parametre general*/

/*mise en page*/
#site {
width: 800px;
margin: 0 auto;
background-color:#FFFFFF;
}

/*entete*/
#entete {
height:100px;
}

/*menu deroulant*/
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position:absolute;
left:320px;
z-index:100;
/*width: 100%;*/
}

#menu dl {
float: left;
width: 15em;
margin: 0 8px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background:#FF0000;
border: 1px solid gray;
}

#menu dd {
border: 1px solid gray;
}

#menu li {
text-align: center;
background:#FF0033;
}

#menu li a, #menu dt a {
color:#FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background:#66FF00;
}

a {
text-decoration: none;
color: black;
color: #222;
}
/*fin menu deroulant*/
/*fin entete*/

/*contenu*/
#contenu {
z-index:1;
height: 475px;
background-color:#FF99CC;
}
/*yoga*/
#texte1 h2 {

color:#990033;
text-align:center;
margin-top: 0.1em;
}

#texte1 p {
margin:1em 3em;
font-size:12px;
text-align:left;
color:#FF0000;
font-weight:bold;
}
/*fin yoga*/

/*massage ayurvedique*/
#texte2 h2 {
color:#990033;
text-align:center;
margin-top: 1.4em;
}

#texte2 p {
margin:1.4em 3em 1em 1em;
font-size:12px;
text-align:left;
color:#FF0000;
}
/*fin massage ayurvédique*/

/*reflexologie plantaire*/
#texte3 h2 {
color:#990033;
text-align:center;
margin-top: 1.4em;
}

#texte3 p {
margin:2em 3em 2em 1em;
font-size:12px;
text-align:left;
color:#FF0000;
}
/*fin reflexologie plantaire*/


#texte1 ul {
color:#FF0000;
text-align:left;
margin:1em 0 1em 8em;
}

#texte1 ul li {
padding:1em 2em;
}

.yoga {
margin-right: 1em;
}

.massage {
margin: 0 1em 0 8em;
}

.reflex {
margin: 0 1em -1em 27em;
}

.acceuil {
text-align:center;
margin: 2em 0;
}

.contact {
margin: 2em 0;
}

.inscription {
margin: 2em 0;
}

.administrateur
{
margin: 2em 0;
}

.suppression
{
margin: 2em 0;
}

.modification
{
margin: 2em 0;
}


/*fin contenu*/


/*pied page*/

/*sous menu pied de page*/
#pied {
clear: both;
line-height: 25px;
text-align: center;
border-top: 2px dotted #FF0000;
height: 25px;
}

#pied ul {
list-style-type:none;
}

#pied ul li {
display:inline;
/*float:left;*/
padding: 0;
margin: 0 1em 0 0;
}

#pied li a  {
color:#FF0000;
}

#pied li a:hover  {
color:#00FF00;
}
/*fin sous menu pied de page*/
/*fin pied page*/

/* Style des formulaires */

#monForm
{
	width: 400px;
	margin: 1em 0;
}

#monForm p
{
	margin: 2px 0;
}

/* fieldset , legend */
#monForm fieldset
{
	margin-bottom: 10px;

}

#monForm fieldset:hover
{
	background-color: transparent;
}

#monForm fieldset legend
{
	padding: 0 10px;
	border-left: #ccc 1px solid;
	border-right: #ccc 1px solid;
	font-size: 1.2em;
	color: #999;
	margin: 0 1em;
}


/* Label */
#monForm label
{
	display: block;
	float: left;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
}

#monForm label:hover
{
	font-weight: bold;
}

#monForm .form_label_nostyle
{
	background: none;
}


/* Input */
#monForm input, #monForm select
{
	margin-left: 1%;
	width: 45%;
	border: #ccc 1px solid;
}

#monForm input:hover, #monForm select:hover, #monForm input:focus, #monForm select:focus
{
	border: #999 1px solid;
	background-color: #efefef;
}

#monForm .date
{
	width: 5%;
}

#monForm .annee
{
	width: 10%;
}

/* Textarea */
#monForm textarea
{
	margin-left: 1%;
	width: 45%;
	border: #ccc 1px solid;
}

/* checkbox */
#monForm #homme, #monForm #femme
{
	margin-left: 1%;
	width: 10%;
	border: #ccc 1px solid;
}


/* button submit */
#monForm input[type="submit"]
{
	border: #efefef 1px solid;
	width: 25%;
}

#monForm input[type="submit"]:hover
{
	background-color: #c60;
	cursor: pointer;
}

#monForm input[type="reset"]
{
	border: #efefef 1px solid;
	width: 25%;
}

#monForm input[type="reset"]:hover
{
	background-color: #c60;
	cursor: pointer;
}

/* Label */
#monForm label
{
	background-color: #ccc;
	display: block;
	width: 45%;
	float: left;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
}

#monForm label:hover
{
	font-weight: bold;
}

#monForm .form_label_nostyle
{
	background: none;
}


/* Input */
#monForm input, #monForm select
{
	margin-left: 1%;
	width: 45%;
	border: #ccc 1px solid;
}

#monForm input:hover, #monForm select:hover, #monForm input:focus, #monForm select:focus
{
	border: #ccc 1px solid;
	background-color: #efefef;
}

#monForm .date
{
	width: 5%;
}

#monForm .annee
{
	width: 10%;
}

/* Textarea */
#monForm textarea
{
	margin-left: 1%;
	width: 45%;
	border: #ccc 1px solid;
}


* button submit */
#monForm input[type="submit"]
{
	background-color: #fff;
	border: #efefef 1px solid;
	width: 25%;
}

#monForm input[type="submit"]:hover
{
	background-color: #efefef;
	cursor: pointer;
}

#monForm input[type="reset"]
{
	border: #efefef 1px solid;
	width: 25%;
}

#monForm input[type="reset"]:hover
{
	background-color: #c60;
	cursor: pointer;
}

#texte4 h2 {
margin: 2em 0em;
}

#texte4 p {
text-align:center;
color:#FF0000;
margin-top:1em;
}

/*acces administrateur*/

#connexion h2 {
margin:2em;
color:#FF0000;
text-align:center;
}

#connexion p {
color:#FF0000;
text-align:center;
margin-bottom:2em;
}

#connexion td {
color:#FF0000;
}

#connexion input {
margin:1px 0 0 1em;
}

/*menu deroulant administrateur*/
dl, dt, dd, ul, li {
margin:0 3px 0 1px;
padding: 0;
list-style-type: none;
}

#menu2 {
margin:0 auto;
z-index:100;
width: 100%;
}

#menu2 dl {
float: left;
width: 13em;
/*margin: 0 8px;*/
}

#menu2 dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background:#FF0000;
border: 1px solid gray;
}

#menu2 dd {
border: 1px solid gray;
}

#menu2 li {
text-align: center;
background:#FF0033;
}

#menu2 li a, #menu2 dt a {
color:#FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu2 li a:hover, #menu2 dt a:hover {
background:#66FF00;
}

/*fin menu deroulant*/

/*liste membres*/
.nom {
color:#FF0000;
background-color:#FFFFFF;
text-align:center;
border-style: double;
border-color:#FF0000;
font-size:14px;
font-weight:bold;
padding: 3px 30px 3px 30px;
}

.prenom {
color:#FF0000;
background-color:#FFFFFF;
text-align:center;
font-size:14px;
font-weight:bold;
padding: 3px 30px 3px 30px;
}

.liste1 {
color:#FF0000;
background-color:#FFFFFF;
text-align:center;
font-size:12px;
padding: 3px 30px 3px 30px;
}

.liste2 {
color:#FF0000;
background-color:#FFFFFF;
text-align:center;
font-size:12px;
padding: 3px 30px 3px 30px;
}

.suivant {
text-align:center;
color:#FF0000;
font-weight:bold;
padding-right:15px;
}

.dernier {
text-align:center;
color:#FF0000;
font-weight:bold;
padding-right:15px;
}

.precedent {
text-align:center;
color:#FF0000;
font-weight:bold;
padding-right:15px;
}

.premier {
text-align:center;
color:#FF0000;
font-weight:bold;
padding-right:15px;
}

#details td {
color:#FF0000;
background-color:#FFFFFF;
text-align:center;
font-size:10px;
padding: 1px 15px 1px 15px;
}

#details table {
margin-top:10px;
}

.acces {
color:#FF0000;
text-decoration:underline;
}

.acces a {
margin:600px 0 0 0;
}

#tableau td {
color:#000066;
}

#form1 {
margin:20px;
}

.modification {
margin-top:30px;
text-align:center;
}

Sujet clos

CSS et mise en forme, CSS3

Probleme de positionnement sous FireFox.