28173 sujets

CSS et mise en forme, CSS3

Eternel problème entre IE et Firefox

Bein oui, j'ai un méchant décalage sous Firefox...

Bonjour à toutes et tous au fait !

Alors voici la page :
http://eurodio.creation-website.net/index.php

Elle semble toute belle sous IE mais dès qu'on passe sous Firefox, elle part en vrille (juste la colonne d'images qui sort du cadre)

Le code de ma page ressemble à ceci :

<body>
<div id="conteneur">	
	<div id="header">
		<div id="menu">
		Liens du menu
		</div>
	</div>
	<div id="col_gauche"><?php include("inc/pub.inc"); ?></div>
	<div id="col_milieu">
		<div id="content">
			<div id="contenu">
				Contenu texte...
				?>
			</div>
			<div id="colonne">
				Images...
			</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>


Et voici le code de mon 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;
	background: transparent url(../images/menu/logo.gif) top left no-repeat;
}

/* __________ LOGO __________ */
#logo
{
	width: 210px;
	height: 92px;
	left: 0px;
	background: transparent url(../images/logo.gif) top left no-repeat;
}
#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;
	}
/* __________ MENURIGHT __________ */
#colonne {
	margin-left:400px;
	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;
}


/* __________ MENU __________ */
#menu {display:inline; width:800px; height:92px; left: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;}


/* __________ 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 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;
}


Merci d'avance à celui qui verra la petite coquille qui traine quelque part car je commence à devenir Smiley biggol

A très vite !!!
Merci m'sieur... ca marche mieux en effet...

Par contre pour tout mettre aux normes du W3C c'est un peu galère !!!
Sujet clos
Aller à