Pb de compatibilité entre FireFox et IE

Hello, en fait je suis nouveau je viens de creer un sujet de presentation sur le bar du forum, donc j'attaque mon probleme

en fait je dois devellopper un site internet pour le pere de ma copine,
et j'ai jamais fait ça avant, je me sers jamais de firefox, j'ai je doit dire cote developpement d'interface je suis un peu un gogol.

Bref j'ai commencer a le develloper et ça donne ceci :

http://gruet.alexis.free.fr/ace/index.html

J'ai employer les technologies XHTML 1.0 Strict car jme suis dit faut penser aux eventuelles evolution pour les personnes a mobilités reduite
et j'ai utiliser du CSS pour la mise en forme

Cote XML je peut pas dire que ce fut trop dur
mais cote CSS j'en ais bavé je me suis meme acheter un livre a 45 euro de E. Meyer chez Oreilly mais je doit dire que ca ma pas vraiment aidé

Donc je commence mon devellopement le 12 et j'arrive jusqu' au resultat que vous avez vu sur le lien plus haut
mais voila si vous avez FireFox Bah c'est Nul a chier !!!!!!!!! ca marche pas du tout par contre sur IE je trouve que c'est pas si mal pour un debut

bref je ne me sens pas du tout le courage de debugger un CSS et j'ai beau regarder les sujet sur le site alsa je voit pas du tout la methodo a suivre. je comprend evidement le fond mais la forme...

En plus mon fichier CSS il resemble a rien je suis sur qu'il y a moyen de le factoriser mais j'ais pas l'experience dans ce domaine. je pense que quelqu'un qui a l'habitude de developper dans ce domaine verra directe ce qui va pas ( j'espere )

est-il possible que je vous le montre et que vous donnier vos impressions ?

voila j'espere ne pas vous avoir trop raconter ma vie
@+ et surtout merci pour votre aide

P.S : je sais pas ecrire je fais trop de faute

alexis

Où est ce que l'anim flash doit se trouver normalement ?

hello,

tu n'utilise pas IE ? ( juste pour tester )

c'est difficile de le decrire comme ça ...

elle doit se trouver entre le bord gauche et les pointiller a droite
mais sur firefox en sortie tout est melanger donc c'est pas evident de se rendre compte

++

en fait je vais te faire voire ma feuille de style

( je precise que sur IE > 5.5 ça fonctionne tres bien )

body {
margin:5px;
padding:0;
color: #5d665b;
font-size: xx-small;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color:#A9C0D0;
margin-left:10px;
}




a img {border: none;}

a { color:#094F6A; }



div#boite-centre {
border-style:solid;
border-width:1px;
background-color:#cccccc;

}

.boite-centre-gauche {
float:right;

} 

h1 {
letter-spacing: 0.5em; word-spacing: 0.5em;
font-size:1em;
padding:0.5em;
color:#A67676;
}

.boxe h1 {
padding-left:25px;
}



h2 {
font-size:x-small;
}

.boxe h2 {
padding-left:40px;

}



li {
list-style-type:none;
background-image:url(../img/fleche.jpg);
background-repeat:no-repeat;
background-position:0% 80%;
padding-left:40px;
}

#left li {
background-image:url(../img/fleche04.jpg);
padding-left:20px;
}

#right li {
background-image:url(../img/fleche04.jpg);
}

div#left {
margin:0px;
padding:0.2em;
float:right;
width:200px;
border-width:0px;
background-color:white;
border-left-style:dashed;
border-width:1px;
border-color:#5F6264;

}

#boxhead {
float:right;
color:white;
padding-top:15px;
padding-right:15px;
/*font-weight:bold;*/
text-align:right;
line-height:12px;
}

#boxhead li {
background-image:none;
}

.lang {
margin:0px;
padding-right:10px;
padding-top:5px;
float:right;
}

div#header {
padding:0.2em;
width:800px;
border-style:solid;
border-width:2px;
border-bottom-style:none;
border-color:#5F6264;
background-color:#094F6A;
}

.sub {
padding-left:15px;
padding-right:2px;
border-left-style:solid;
border-left-color:#5F6264;
border-width:2px;
border-right-style:solid;
border-right-color:#5F6264;
width:800px;
background-color:#094F6A;
}

div#middle {
padding:0.2em;
border-style:solid;
border-width:2px;
border-color:#5F6264;
width:800px;
background-color:white;
border-top-width:0px;
}

div#footer {
padding:0.2em;
width:800px;
}


p {

padding-left:5px;

}

p.footer {
text-align:center;
color:white;
}

p.left {
margin-left:0.4em;
}

.image {
margin-top:8px;
margin-left:5px;
float:left;
}

.imgboxe {
position:absolute;
right:25%;
top:35%;
}


.email {
width:500px;
margin-left:45px;
}

#cadre { /* taille du cadre, à titre d'exemple */
margin-left:50px;
width: 500px;
background-color: #909090;
}
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; }

#hautgauche {
background: url(../img/hautgauche.gif);
}

#hautdroit {
float: right;
background: url(../img/hautdroit.gif);
}

#basgauche {
background: url(../img/basgauche.gif);
}

#basdroit {
float: right;
background: url(../img/basdroit.gif);
}

#contenu p {
color: white;
margin: 0.5em; }

.flash {
border-top-style:solid;
border-bottom-style:solid;
border-top-width:1px;
border-bottom-width:1px;
border-right-style:none;
border-right-width:0px;
margin-left:-5px;


}

.menu1 { 
border-bottom:solid 1px black ;   
padding-top:12px ; 
intérieure haute   
padding-bottom:0px ;   
background-color:transparent;} 

.onglet { 
  margin : 2px ; 
  padding:5px 7px 0px 7px ; 
  background:url(../img/coin-haut-droite.gif) no-repeat right top}  

a.onglet { 
  background-color:#E7E4E4 ; 
  color:#094F6A;
  text-decoration:none}   
.onglet-actif { 
   border-bottom:solid 2px white ;
   background-color:white}


a.linkleft {

    color: #3399FF;
    background-color: #FFFFFF;
    font-weight: normal;
}

En fait je m'y suis mis vraiment et c'est pas si dur, mais ce que je n'avais pas saisie quand meme c'est la priorite par rapport au flux xml

et c'est clair que feuille de style css ou pas il fallait bien comprendre ça des le debut

ensuite faut compter pour mon "site" environ 3 heures de debug

il subsiste encore des choses que je ne comprends pas bien ...

notament avec les propriete a:link, a:hover
sur mozilla il semble ne pas y avoir de probleme mais sur IE ca ne fonctionne pas vraiment

ensuite pourqoui la typographie n'apparait pas vraiment de la meme maniere sur IE que sur Mozilla ?
je trouve que sur Mozilla la typO est plus petite et plus dure a lire

pourquoi sur IE si un objet fait 590px il na pas l'air d'en faire autant sur Mozilla

pour finir si vous pouvez tester sur IE et sur Mozilla de chez vous

a l'adresse : http://gruet.alexis.free.fr/ace/batch/test.html

ci joint mon code :

/*-------------------------- PROPRIETE COMMUNE ----------------------------*/

body {
margin:5px;
padding:0;
color: #5d665b;
font-size: xx-small;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color:#A9C0D0;
margin-left:10px;
}

a {color:#094F6A;}
a img {border: none;}
a:link {color:#3399FF; font-weight: normal;}
a:hover {color:red; font-weight: normal;}


h1 {letter-spacing: 0.5em; word-spacing: 0.5em; font-size:1em; padding:0.5em; color:#A67676;}
h2 {font-size:1em;}

li {list-style-type:none; background-repeat:no-repeat; padding-left:40px;}

p {padding-left:5px;}


/* --------------------------- DEBUT DU HEADER -----------------------------------*/

.logo {margin-top:8px;margin-left:5px;}

div#header {
padding-right:0.2em;
padding-left:0.2em;
width:800px;
border-style:solid;
border-width:2px;
border-bottom-style:none;
border-color:#5F6264;
background-color:#094F6A;
}



#contenuHeader {
float:right;
padding-top:15px;
padding-right:15px;
color:white;
text-align:right;
line-height:12px;
}

#contenuHeader li {
list-style-type: none;
}

.lang {
clear:both;
float:right;
margin:0px;
padding-right:10px;
padding-top:0px;
}



    /*--------------------------- LE MENU PAR ONGLET --------------------------*/ 
	.menu1 { /* boite qui contient le menu (les onglets) */
  		padding-left:10px;
  		border-bottom:solid 1px black ; /* crée le trait noir en-dessous des onglets */
  		padding-top:12px ; /* marge intérieure haute */
  		padding-bottom:0px ; /* marge intérieure basse */
  		background-color:transparent;} /* le fond du menu est noir */

	.onglet { /* style des onglets inactifs */
  		margin : 2px ; /* marge extérieure */
  		padding:5px 7px 0px 7px ; /* marge intérieure */
 		background:url(../img/coin-haut-droite.gif) no-repeat right top} /* insère un rectangle noir en haut à droite de l'onglet */

	a.onglet { /* style des liens se trouvant dans un onglet inactif */
  		background-color:#E7E4E4 ; /* le fond de l'onglet est gris */
  		color:#094F6A;
  		text-decoration:none} /* les liens ne sont pas soulignés */ 
  
	.onglet-actif { /* style de l'onglet de la page active */
   		border-bottom:solid 2px white ; /* le trait inférieur est effacé */
   		background-color:white} /* le fond de l'onglet actif est blanc*/


/* ------------------------------ FIN DU HEADER OK A 01:23 -------------------------*/


/*------------------------------- LE CENTRE DE LA PAGE -----------------------------*/



.contenuCentral h1 {padding-left:40px;}
.contenuCentral h2 {padding-left:25px;}
.contenuCentral li {background-image:url(../img/fleche.jpg); padding-left:40px; background-position:0% 80%}


div#centre {
padding:0.2em;
border-style:solid;
border-width:2px;
border-color:#5F6264;
width:800px;
background-color:white;
border-top-width:0px;
}

.flash {
margin-left:1px;
width:585px;
height:218px;
border:solid 1px black
}



/*-------------------- COTE DROIT ----------------------*/


.contenuDroit li {background-image:url(../img/fleche04.jpg); padding-left:20px; background-position:0% 50%}


.contenuDroit h2 {padding-left:20px;}

.contenuDroit {
float:right;
margin:0px;
padding:0.2em;
width:200px;
background-color:white;
border-left-style:dashed;
border-left-width:1px;
border-color:#5F6264;
}

/*---------------------- FIN COTE GAUCHE -----------------*/

/*----------------- FOOTER ----------------------------*/

div#footer {padding:0.2em; width:800px;}
p.footer {text-align:center; color:white;}
a.footer {color:#094F6A;}

Merci