Problèmes de positionnement sous... firefox cette fois ;-)

Question

GreggBazin

14 Jun 2006 à 10:33

Bein voilà, mon site tourne bien sauf que j'ai un décalage en haut de page sous firefox (???)

Je suis persuadé que la réponse est juste sous mes yeux mais j'ai trop retourné mon code dans tous les snes et je suis un peu perdu là...

La page sous IE :
http://img151.imageshack.us/img151/1771/iexplorer0ax.gif

La page sous Firefox :
http://img84.imageshack.us/img84/7686/firefox2ke.gif

Mon code HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<?php include('script.inc');?>
	<?php include('includesarray.inc');?>
	<style type="text/css">
	@import url("css/eurodio_fx.css");
	</style>
	<!--[if IE]>
	<style type="text/css">
	@import url("css/eurodio_ie.css");
	</style>
	<![endif]-->
    </head>
<body>
<div id="conteneur">	
	<div id="header">
		<div id="menu">
		<ul>
			<li class="lien1"><a id="item1" href="index.php?p=accueil"></a></li>
			<li class="lien2"><a id="item2" href="index.php?p=charte"></a></li>
			<li class="lien3"><a id="item3" href="index.php?p=produits1"></a></li>
			<li class="lien4"><a id="item4" href="index.php?p=adresses"></a></li>
			<li class="lien5"><a id="item5" href="index.php?p=recrutement"></a></li>
			<li class="lien6"><a id="item6" href="index.php?p=liens"></a></li>
		</ul>
		</div>
	</div>
	<div id="col_gauche"><?php include("inc/pub.inc"); ?></div>
	<div id="col_milieu">
		<div id="content">
			<div id="contenu">
				XXXXXXXXXXXXXXXXXXXXXXXXXXX
			</div>
			<div id="colonne">
				XXXXXXXXXXXXXXXXXXXXXXXXXXX
			</div>
		</div>
		<div id="baseline"><img src="images/fleche.gif"> Cliquez sur les photos pour un affichage en grande taille<img src="images/espaceur.gif" height="1" width="25"></div>
	</div>
	<div id="col_droite"></div>
	<div id="pied"><?php include("inc/pied.inc"); ?></div>
</div>
</body>
</html>

Et mon code CSS :

/* __________ BODY __________ */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #105C5C;
	line-height: 16px;
}

/* __________ CONTAINER __________ */
#conteneur
{
	width: 800px;
	margin: 0px;
	text-align: left;
	background-color: #88AFB4;
	border: 1px solid white;
	position:relative;
}

/* __________ HEADER __________ */
#header
{
	width: 800px;
	height: 92px;
	left: 0px;
	top: 0px;
	background: transparent url(../images/menu/logo.gif) top left no-repeat;
}
/* __________ MENU __________ */
#menu {display:inline; width:800px; height:92px; left:0px; top: 0px;}
#menu ul {margin-left:217px; padding:0; list-style-type:none;}
#menu li {float:left;}

#menu li.lien1 {background:transparent url(../images/menu/menu_off_01.gif);}
#menu li.lien2 {background:transparent url(../images/menu/menu_off_02.gif);}
#menu li.lien3 {background:transparent url(../images/menu/menu_off_03.gif);}
#menu li.lien4 {background:transparent url(../images/menu/menu_off_04.gif);}
#menu li.lien5 {background:transparent url(../images/menu/menu_off_05.gif);}
#menu li.lien6 {background:transparent url(../images/menu/menu_off_06.gif);}

#menu a {display:block; width:97px; height:92px; padding-top:0px; padding-right:0px; color:#000000; overflow:hidden;}
* html #menu a:link, * html #menu a:visited {height:92px;},
* html #menu a:hover {height:92px;}

#menu a#item1 {background:transparent url(../images/menu/menu_on_01.gif) -130px -90px no-repeat;}
#menu a#item2 {background:transparent url(../images/menu/menu_on_02.gif) -130px -90px no-repeat;}
#menu a#item3 {background:transparent url(../images/menu/menu_on_03.gif) -130px -90px no-repeat;}
#menu a#item4 {background:transparent url(../images/menu/menu_on_04.gif) -130px -90px no-repeat;}
#menu a#item5 {background:transparent url(../images/menu/menu_on_05.gif) -130px -90px no-repeat;}
#menu a#item6 {background:transparent url(../images/menu/menu_on_06.gif) -130px -90px no-repeat;}

#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}
#menu a#item3:hover {background-position:0 0; z-index:50;}
#menu a#item4:hover {background-position:0 0; z-index:50;}
#menu a#item5:hover {background-position:0 0; z-index:50;}
#menu a#item6:hover {background-position:0 0; z-index:50;}

#col_gauche
{ 	
	position:absolute;
	top:92px;
	margin-left:4px;
	margin-top:10px;
	width:209px;
	height: 460px;
	background-color: #88AFB4;
	}
#col_milieu
{ 	
	position:absolute;
	top:92px;
	margin-left:209px;
	width:566px;
 	background-image: url(../images/fond.gif);
	}

#col_droite
{ 	
	position:absolute;
	padding-top:40px;
	top:92px;
	margin-left:775px;
	width:25px;
	height: 460px;
	background-color: #88AFB4;
	background: transparent url(../images/colonne_droite.gif) no-repeat;
	}

/* __________ CONTENT __________ */
#content {
	text-align: justify;
	line-height: 15px;
} 

/* __________ CONTENU __________ */
#contenu 
{ 	
	top:100px;
	float:left;
	margin-left:0px;
	width:372px;
	color: #105C5C;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	padding: 20px 5px 5px 15px;
	}
/* __________ OFFRES __________ */
td.offres 
{ 	
	color: #105C5C;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	padding: 20px 5px 5px 15px;
	}
/* __________ MENURIGHT __________ */
#colonne {
	margin-left:0px;
	margin-top:10px;
	width: 150px;
	background-color: #EBF6F2;
	border: 1px solid #B6E0D0;
	scrollbar-face-color: #258989;
    scrollbar-shadow-color: #3F9797;
    scrollbar-highlight-color: #A5CECE;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
	overflow: auto;
	color: #105C5C;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	padding: 10px 5px 10px 0px;
	}
/* __________ BASELINE __________ */
#baseline
{
	width:591px;
	height:30px;
	position:absolute;
	bottom: 0px;
	left: 0px;
	text-align:right;
	padding-top:12px;
	background: transparent url(../images/bas_cadre.gif) no-repeat;
	background-color:#88AFB4;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	color:#FFFFFF;
}
/* __________ PIED __________ */ 
#pied
{
	width:800px;
	height:30px;
	position: absolute;
	bottom: 0px;
	margin:0px;
	left: 0px;
	background: url(../images/pied.gif) no-repeat;
	background-color:#00879A;
	color:#FFFFFF;
	padding-top:5px;
}


h3 {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 22px;
	line-height: 22px;
	margin-bottom: 2px;
	color: #AC0009;
}
/* __________ LIEN TEXTE __________ */
a.lien_texte
{	font-size:12px;
	text-align:left;
	color: #41AD86;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: none;
}
a.lien_texte:visited 
{	font-size:12px;
	text-align:left;
	color: #41AD86;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: none;
}
a.lien_texte:hover
{	font-size:12px;
	text-align:left;
	color: #41AD86;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: underline;
}
/* __________ LIEN ADMIN __________ */
a.lien_admin
{	font-size:12px;
	text-align:left;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: none;
}
a.lien_admin:visited 
{	font-size:12px;
	text-align:left;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: none;
}
a.lien_admin:hover
{	font-size:12px;
	text-align:left;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: underline;
}

/* __________ LIEN PIED __________ */
a.lien_pied
{	font-size:11px;
	text-align:left;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: underline;
}
a.lien_pied:visited 
{	font-size:11px;
	text-align:left;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: underline;
}
a.lien_pied:hover
{	font-size:11px;
	text-align:left;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	text-decoration: none;
}
/* __________ FORMULAIRES __________ */
input.cv { 
	BORDER-RIGHT: #88AFB4 1px solid;
	BORDER-TOP: #88AFB4 1px solid;
	FONT-WEIGHT: normal;
	FONT-SIZE: 12px;
	BORDER-LEFT: #88AFB4 1px solid;
	WIDTH: 300px;
	COLOR: #000000;
	LINE-HEIGHT: normal;
	BORDER-BOTTOM: #88AFB4 1px solid;
	FONT-FAMILY: Arial, Trebuchet MS, Geneva, sans-serif;
	BACKGROUND-COLOR: #EBF6F2;
	margin-bottom: 2px; 
	margin-left: 1em; 
	}
textarea.cv { 
	BORDER-RIGHT: #88AFB4 1px solid;
	BORDER-TOP: #88AFB4 1px solid;
	FONT-WEIGHT: normal;
	FONT-SIZE: 12px;
	BORDER-LEFT: #88AFB4 1px solid;
	WIDTH: 300px;
	COLOR: #000000;
	LINE-HEIGHT: normal;
	BORDER-BOTTOM: #88AFB4 1px solid;
	FONT-FAMILY: Arial, Trebuchet MS, Geneva, sans-serif;
	BACKGROUND-COLOR: #EBF6F2;
	margin-bottom: 2px; 
	margin-left: 1em; 
	}
.button_vert {
	BORDER-RIGHT: #105C5C 2px solid;
	BORDER-TOP: #105C5C 2px solid;
	FONT-WEIGHT: bold;
	FONT-SIZE: 10pt;
	BORDER-LEFT: #105C5C 2px solid;
	COLOR: #FFFFFF;
	BORDER-BOTTOM: #105C5C 2px solid;
	FONT-FAMILY: Arial, Trebuchet MS, Geneva, sans-serif;
	BACKGROUND-COLOR: #88AFB4 ;
	FONT-VARIANT: normal;
	TEXT-DECORATION: none;
	text-align : center;
	padding-bottom : 1px;
	padding-left : 1px;
	padding-right : 1px;
	padding-top : 1px;
}

Un grand merci d'avance comme d'hab pour votre aide Smiley biggrin

Marvin Le Rouge

14 Jun 2006 à 10:39

Salut,

Essaye de mettre un

*
{
  margin : 0;
  padding : 0;
}

au début de ton css.

GreggBazin

14 Jun 2006 à 11:50

Waoouhhh j'suis impressionné... Merci Marvin !!!
y a-t-il une explication à cette petite bidouille ???

AymericJ

14 Jun 2006 à 13:05

Bonjour GreggBazin,

Cette "bidouille" permet de mettre à plat certains reglages par défaut des différents navigateurs.

++
Aymeric

GreggBazin

14 Jun 2006 à 14:03

Super, un grand merci pour votre efficacité, comme d'hab !!!!

Sujet clos Smiley biggrin

bouba21

15 Jun 2006 à 15:27

J'ai eu le même problème et grace à vous il est résolu !
Merci les gars Smiley biggrin

Sujet clos

CSS et mise en forme, CSS3

Problèmes de positionnement sous... firefox cette fois ;-)