Probleme Sous Firefox

[Tekmatok]

Bonjour , voila je creer mon premier site pour raconter l'histoire de mes personnes dans un jeu vidéo .

je me fais donc une sorte de site internet avec les infos que j'ai trouver sur le net et dans d'autres fichiers .

Voici donc mon probleme . Mon site marche sous IE mais sous FF il est completement deformé .

Voici en image , ce sera probablement plus compréhensible .

Attention , les images sont en resolution 1680x1050 pixels

Le site se trouve ici .

http://tekmatok.free.fr/

Le site sous Internet Explorer .

http://tekmatok.free.fr/fichiers/le.site.sous.ie.jpg

Le site sous Firefox .

http://tekmatok.free.fr/fichiers/le.site.sous.ff.jpg

J'ai aussi mis en ligne mes fichiers css et pages ici .

http://tekmatok.free.fr/fichiers/site.perso.rar

Ou si vous preferez , voici les fichiers CSS .

Fichier general.css

<style type="text/css">
<!--

/*GENERAL*/

body {
margin: 0px;/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 0.8em; /* on définit la taille de police de base dans la page. em est une unité qui tient compte des préférences de l'utilisateur (0.8em, préférence moyenne =12px env.) */
background-color: #FFFFFF;
text-align: justify;
}

	/*Titres*/
	h1 {
	font-size: 140%;
	text-align: left;
	padding:0;
	margin:0;
	}

	h2 {
	font-size: 100%;
	text-align: left;
	margin:0;
	padding:0;
	line-height:normal;
	}

	h3 {
	font-size: 100%;
	text-align: left;
	margin:0;
	padding:0;
	line-height:normal;
	}


	/*---------*/

	ul, li{
	margin-left: 8;
	margin-bottom: 10;
	padding:0;
	line-height: 0px; /* interligne */
	}


	p {
	text-align: justify;
	line-height: normal;
	font-size: 100%;
	}

	a {
	font-weight: bold;
	color: #00005F; /*#00005F=bleu foncé*/
	text-decoration: none; /* "none" pour éviter le soulignement au survol */
	}

	dt{
	font size: 120%;
	text-align: left;
	margin-top:10px;
	padding:0;
	line-height:normal;
	}

	dd{
	font size: 100%;
	text-align: left;
	margin-left:10px;
	line-height:normal;
	}

/*GENERAL FIN*/

/*----------------------*/
-->
</style>

Fichier structure.css

<style type="text/css">
<!--

/*BLOC DE DROITE*/

.droite {
position: absolute;
margin:0px;
padding:0px;
right:0px; /* on place le bloc droit à droite en position absolue */
top: 0px;
width: 180px;
height:470px;
}

	/*MENU DEBUT*/

	.menu { /* on définit un conteneur pour le menu qui se trouve dans le bloc droite */
	margin-top:10px; margin-bottom:10px;
	margin-right:0px; margin-left: 0px;
	padding-right: 1px; padding-top: 2px; padding-bottom: 2px;
	padding-left: 0px;
	border: 1px solid #000000;
	font-family: verdana, arial;
	font-size: 75%;
	text-align: left;
	line-height: normal;
	}

	.menu a{
	font-weight: normal;
	color: 060C6F;
	text-decoration: none; /* pour éviter le soulignement au survol */
	}

	.menu ul, li{
	margin-left: 8;
	margin-bottom: 10;
	padding:0;
	line-height: normal;
	}


	.menu h2{
	font-size: 110%;
	text-align: center;
	margin:0;
	padding:0;
	line-height:normal;
	}

	.menu tr,td{
	font-size: 70%;
	margin:0;
	padding:0;
	line-height:normal;
	}

	/*MENU FIN*/

/*BLOC DE DROITE FIN*/

/*----------------------*/

/*BLOC CENTRE*/

.centre {
margin-right: 180px; /* on place le bloc centre par rapport à la largeur du bloc droit */
margin-top: 0px;
height:100%;
}

.centre ul,li{
margin: 10;
padding:5px;
line-height: normal; /* interligne */
}

.centre h1
{
background: #FFFFFF url(../image/cadreNewsTitreNoir.gif);
background-repeat: repeat-x;
}

	/*blocs à l'intérieur de CENTRE*/

	.page { /* on définit un conteneur pour la news qui se trouve dans le bloc centre*/
	border: 1px solid #000000;
	background-image: url(../images/fondlogo.gif);
	font-family: verdana, arial;
	font-size: 75%;
	text-align: justify;
	line-height: normal;
	padding: 3px;
	}

	.page ul, li {
	margin-left: 20;
	margin-right:0;
	margin-top:0;
	margin-bottom: 0;
	padding: 0;
	}


/*BLOC CENTRE FIN*/


/*----------------------*/
-->
</style>

Je vous remerci par avance pour votre aide .

Modifié 10 Mars 2007 par Tekmatok

[karnabal]

Salut,

C'est bien d'envisager une mise en page à base de blocs et se passer des tables, encore faut-il faire bonne usage des balises.

Je te conseille de partir sur un gabarit de mise en page, de bien regarder et comprendre sa structure (regarde comment les menus sont construits), puis de l'adapter à ton projet.

Equipe bien tes pages d'un doctype (cf les gabarits !), et évite de mettre plusieurs balises <html> !

Enfin, suis régulièrement le comportement de tes pages à travers les principaux navigateurs : IE6, IE7 et Firefox 2.0. Tu n'auras pas le genre de surprise que tu nous remontes dans ce topic.

Bon courage ! Je suis sûr que ça va bien se passer si tu es attentif à la façon dont les pages sur lesquelles je te renvois sont constituées.

[Daxey]

Quand il y à des problèmes d'affichages, c'est toujours bien de faire un tour par ici : http://validator.w3.org