28173 sujets

CSS et mise en forme, CSS3

Problème de feuille de style et des navigateurs

Bonjour... pour mon premier topic sur ce forum je demande de l'aide

En effet, je suis en train de réaliser un site et j'ai un problème de compatibilité de mon css entre les navigateurs. Ce que je veux faire exactement est à l'image de la page affichée sur IE7 mais sur Firefox 2.0 ou encore Opera 9.1 (je ne suis pas encore allé voir sur Flock) ce n'est pas la même chose.

Par exemple, le 'margin-bottom: 7px;' de ma balise #haut n'apparait dans aucun des deux navigateurs.

En plus sur Firefox, les deux colonnes sont séparées par un espace trop important... et les dimensions de ma balise #page n'est pas respectée.

Comment faire alors ?

Si ça peut vous aider :
body { 
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #999999;
	background-color : #232323;
}
<!-- Classes -->
#page {
	width : 980px;
	height : 680px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#haut {
	width: 100%;
	margin-bottom: 7px;
}
#haut #banniere {
	background-color : #323232;
	float: left;
	width: 800px;
	height: 136px;
	text-align: left;
}
#haut #numero {
	background-color : #323232;
	float: right;
	width: 160px;
	height: 126px;
	padding: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #AFAFA9;
	text-align: right;
}
#conteneur {
	width: 100%;
}
#conteneur #main {
	float: left;
	width: 800px;
	height: 537px;
}
#conteneur #main #contenu {
	background-color: #323232;
	float: left;
	width: 800px;
	height: 462px;
	text-align: left;
	margin-bottom: 7px;
}
#conteneur #main #pied {
	background-color: #323232;
	float: left;
	width: 800px;
	height: 68px;
	text-align: center;
	margin-bottom: 7px;
}
#conteneur #main #contenu #edito {
	padding: 15px;
	text-align: justify;
	color: #CCCCCC;
}
#conteneur #main #contenu #edito #text {
	float: left;
	width: 100%;
	height: 400px;
}
#conteneur #main #contenu #edito #footer {
	float: left;
	width: 100%;
	height: 30px;
}
#conteneur #main #contenu #thumper {
	background-color: #323232;
	float: left;
	width: 154px;
	height: 149px;
	text-align: center;
	vertical-align: middle;
	margin-left: 5px;
	margin-top: 3px;
	margin-bottom: 2px;
}
#conteneur #main #contenu #select {
	background-color: #CC99FF;
	float: left;
	width: 154px;
	height: 149px;
	text-align: left;
	margin-left: 5px;
	margin-top: 3px;
	margin-bottom: 2px;
}
#conteneur #navigation {
	background-color: #323232;
	float: right;
	width: 170px;
	height: 537px;
	text-align: left;
}
<!-- Polices -->
#edito .infos {
	font-family: Arial, Helvetica, sans-serif;
	color: #FEFEFE;
	border-bottom-color: #FEFEFE;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	font-size: 11px;
	margin-bottom: 5px;
}
#edito .edito {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #AFAFA9;
	font-size: 14px;
}
#edito a {
	color: #CC99FF;
	text-decoration: none;
}
#edito a:hover {
	color: #323232;
	background-color: #CC99FF;
	text-decoration: none;
}
#footer .infos {
	font-family: Arial, Helvetica, sans-serif;
	color: #FEFEFE;
	border-bottom-color: #FEFEFE;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	font-size: 11px;
	margin-bottom: 5px;
}
#footer a {
	color: #CC99FF;
	text-decoration: none;
}
#footer a:hover {
	color: #323232;
	background-color: #CC99FF;
	text-decoration: none;
}
#pied .infos {
	color: #FEFEFE;
	font-size: 10px;
	padding-top: 5px;
}
#pied a {
	color: #CC99FF;
	text-decoration: none;
}
#pied a:hover {
	color: #323232;
	background-color: #CC99FF;
	text-decoration: none;
}
Bonsoir,

Avant toute chose, je te conseillerais très fortement de supprimer la structure HTML présente dans le #navigation Smiley murf 
		<div id="navigation">
			<!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>Document sans nom</title>
</head>

<body>
</body>

</html>
		</div>

Ah, et puis aussi d'aller jeter un œil à ce tutoriel : L'instruction PHP INCLUDE Smiley cligne
lol en effet c'est un peu pourri dans le code..

merci pour le conseil mais ça ne fait pas trop avancer le schimilimili...
Sujet clos
Aller à