18068 sujets

Questions générales et questions de débutants

PB de position entre IE et FF

Bonjour,

Voilà, j'ai adapté un css pompoer sur le net, jusque là de problème.

Met me probleme c'est que Fire Fox ne postionnement pas le menu comme dans Internet explorer.

//CSS

#page {
	position: absolute;
	width: 900px;
	margin-left: -450px;
	left: 50%;
	height: 540px;
	margin-top: -270px;
	top: 50%;
	background-color: #FFF;
	border: 1px solid #ed1c24;
}
.menu {
	position: relative;
	top: 0;
	left: 0;
	width: 900px;
	height: 25px;
	background: #ed1c24;
	font: normal 12px Arial, Helvetica, sans-serif;
}
.menu ul{
	position: absolute;
	top: 0px; /*margin-top:5px;*/
	list-style-type: none;
	width: 900px;
	height: 15px;
	left: -40px;
}
.menu li{
	float:left;
}
.menu table{
	position:absolute;
	border-collapse:collapse;
	left:0;
	top:0;
	color:#ed1c24;
}
.menu a, .menu :visited {
	color:#fff;
	text-decoration:none;
}
.menu a b, .menu :visited b {
	display:block;
	font-weight:normal;
	background: transparent url(drop/mida.gif);
	cursor:hand;
	border-right:1px solid #fff;
	width: 120px;
	height:25px;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
}
.menu ul ul {
	visibility:hidden;
	position:absolute;
	height:25px;;
	top:20px;
	width:749px;
	border-right:1px solid #fff;
	background:#fff;
}
.menu :hover {
	white-space:normal;
}
.menu a:hover b {
	color:#000;
	background: #fff;
	border-bottom-color:#fff;
}
.menu li:hover > a b {
	color:#ed1c24;
	background-color:#fff;
}
.menu ul li:hover ul,
.menu ul a:hover ul {
	display:block;
	visibility:visible;
	margin-left:152px;
	top:15px;
}
.menu ul :hover ul li {
	display:block; 
	height:20px;
}
.menu ul :hover ul li a {
	display:block;
	font-size:11px; 
	font-family:Arial, Helvetica, sans-serif;
	height:25px; 
	line-height:20px; 
	width:auto; 
	float: left;
	color:#000; 
	padding:0 5px;
	margin-left:1px;
}
.contenuLeft{
	position: absolute;
	top: 60px;
	left: 0px;
	display: block;
	width: 450px;
	height: 450px;
	z-index: 0;
	background: #ed1c24 url(../images/img1.jpg) no-repeat bottom;
}
.contenuRight{
	position: absolute;
	top: 60px;
	left: 450px;
	display: block;
	width: 430px;
	height: 450px;
	background-color: #fff;
	margin: 0 20px 0 20px;
}
.titre{
	font: bold 22px Arial, Helvetica, sans-serif;
	color: #ed1c24;
}
.footer{
	position: absolute;
	right: 10px;
	bottom: 10px;
	font: 10px Arial Helvetica sans-serif;
}
.titreLeft{
	font: bold 22px Arial, Helvetica, sans-serif;
	color: #fff;
	margin: 0 0 0 20px;
}
.sousmenu{
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #fff;
	margin: 0 0 0 49px;
}
a.sousmenu{
	text-decoration: none;
	font: normal 12px Arial, Helvetica, sans-serif;
}
a.sousmenu:hover{
	text-decoration: underline;
	font: bold 12px Arial, Helvetica, sans-serif;
}
.content{
	font: 12px Arial, Helvetica, sans-serif;
	color: #000;
		
}


//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=iso-8859-1" />
<title>Jeunesse à Bruxelles</title>
<link href="css/jab.css" rel="stylesheet" type="text/css" /></head><body>
<div id="page">
   <div class="menu">
<ul>
<li><a href="#nogo" title="Accueil"><b>Accueil</b><!--[if IE 7]><!--></a><!--<![endif]--></li>
<li><a href="#nogo" title="Jeunesse à Bruxelles"><b>Qui sommes nous ?</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="Fouazia Hariche">Le mot de la Présidente&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="Présentation">Présentation&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="The Vale of Ashburnham">The Vale of Ashburnham&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="Crossing the Brook">Crossing the Brook&nbsp;&nbsp;|</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Actualités"><b>Actualités</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Girl with Green Eyes">Plaines&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="The Dream">Stages&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="Woman in Blue">Séjours&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="The Yellow Dress">Cohésion sociale&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="The Yellow Dress">Extra scolaire&nbsp;&nbsp;|</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Paul Cezanne"><b>Paul Cezanne</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Large Bathers">The Large Bathers&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="Onions and Bottles">Onions and Bottles&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="Mardi Gras">Mardi Gras&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="Still Life">Still Life&nbsp;&nbsp;|</a></li>
<li><a href="#nogo" title="Boy in a Red Waistcoat">Boy in a Red Waistcoat&nbsp;&nbsp;|</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
	<div class="contenuLeft">
		<span class="titreLeft">Activités</span><br>
		<span><a href="#" class="sousmenu">Plaines</a></span><br>
		<span><a href="#" class="sousmenu">Stages</a></span><br>
		<a href="#" class="sousmenu">Séjours</a><br>
		<a href="#" class="sousmenu">Cohésion sociale</a><br>
		<a href="#" class="sousmenu">Extra scolaire</a><br>
	</div>
	<div class="contenuRight">
		<span class="titre">Plaines</span>
		<div class="content">
		<span class="content">Les Plaines de Vacances se déroulent dans des lieux adaptés aux conditions climatiques du moment et proposent aux enfants des activités variées l'espace d'une ou plusieurs journées... En hiver, les activités sont mises en place dans des locaux spacieux (animations, spectacles, etc.) ou à l'extérieur (jeux, sports, promenades, etc.). Au printemps et en été, les enfants sont accueillis au sein d'infrastructures aérées où les activités dites de "plein air" sont privilégiées.<br><br>

Les enfants sont accueillis soit directement dans les Plaines de Vacances, soit dans des Centres d'Accueil répartis sur tout le territoire de la Ville de Bruxelles d'où ils sont alors emmenés en bus vers les Plaines.<br><br>

La qualité de nos infrastructures, le niveau de l'encadrement et le professionnalisme de notre équipe d'organisation nous permet d'être reconnus et agréés par l'ONE.</span>
</div>
	</div>
	<div class="footer">contact&nbsp;|&nbsp;FAQ&nbsp;|&nbsp;plan du site&nbsp;|</div>
</div>
</body>
</html>


Quelqu'un peu m'aider Smiley cligne

Merci d'avance
Salut

Ta méthodologie est mauvaise. Il ne faut pas concevoir un site en se basant sur IE, qui est le mauvais élève dans la classe des navigateurs. Travailler avec un navigateur conforme permet de partir sur une base saine. Ensuite, on règle les soucis de compatiblité (avec la méthode proposée par Raphael, par exemple).

Par ailleurs, je ne sais pas où tu as été chercher la structure sur laquelle tu travailles, mais les commentaires conditionnels 
<!--[if lte IE 6]></td></tr></table></a><! endif -->
ne me disent rien qui vaille. Pas étonnant que le rendu soit différent sous Fx & IE, si ce dernier voit des <table> là où les autres n'ont que des <ul> Smiley ohwell
Sujet clos
Aller à