Aide probleme IE vers Firefox css

Bonjour,

Je suis perdue car mon css fonctionne parfaitement sous IE mais pas du tout sous Firefox... Si vous avez une idée (je suis novice), je serai heureuse de l'avoir !

Voici mon code CSS

body

{

background-color: #000000;

}

a img {
border: none;
}

#conteneur

{

margin: auto;
width: 1024px;
position: relative;
}

#2bannieremenu

{

background-image: url("PSD/haut.png");

width: 1024px;
height: 233px;

}

#2corps

{
background-image: url("PSD/corps.png");
width: 1024px;
height: 499px;
color: #846b41;
font-size: 18px;
text-align: left;
padding-left: 0px;
padding-top: 15px;
display: inline;

}

#2bas

{

background-image: url("PSD/bas.png");

width: 1024px;
height: 37px;
color: white;
font-face: Arial;
font-size: 12px;
font-variant: small-caps ;

text-align: center;
padding-top: 7px;

}

#2corps a

{

color: #23b6f7;

font-size: 18px;

text-decoration: none;

}

#2corps a:hover

{

color: #85bb57;

font-size: 18px;

text-decoration: none;

}

#2bas a

{

color: #e4eeda;

font-face: Arial;
font-size: 12px;
font-variant: small-caps ;

font-weight:bold;

text-decoration: none;

}

#2bas a:hover

{

color: #a7bbc1;
font-face: Arial;
font-size: 12px;
font-variant: small-caps ;
font-weight:bold;
text-decoration: none;

}

a.rollover1 {
background:url('PSD/port1.png') no-repeat;
width: 225px;
height: 80px;
display:block;
position: absolute;
TOP:280px;
margin-left: 695px;
}
a.rollover1:hover {
background-position: bottom center;
}

a.rollover2 {
background:url('PSD/web1.png') no-repeat;
width: 225px;
height: 80px;
display:block;
position: absolute;
TOP:365px;
margin-left: 733px;
}
a.rollover2:hover {
background-position: bottom center;
}
a.rollover3 {
background:url('PSD/devis1.png') no-repeat;
width: 225px;
height: 80px;
display:block;
position: absolute;
TOP:450px;
margin-left: 772px;
}
a.rollover3:hover {
background-position: bottom center;
}

a.rollover4 {
background:url('PSD/accueil1.png') no-repeat;
width: 225px;
height: 80px;
display:block;
position: absolute;
TOP:535px;
margin-left: 810px;
}
a.rollover4:hover {
background-position: bottom center;

}

ul li{
position: absolute;
TOP:340px;
margin-left: 410px;
width:233px;height:193px;list-style:none;
}
/*permet de créer deux lignes*/
ul li:nth-child(4n){clear:left;}

ul li a{
display:block;overflow:hidden;
width:233px;height:193px;
margin-top:0px;margin-left:0px;
transition-property:width,height,margin,z-index,border;
transition-duration:0.4s;
}

ul li a:hover{
position:absolute;
width:292px;height:242px;
margin-top:-56px;margin-left:-56px;
z-index:100;
}

ul li a img{
position:absolute;
width:233px;height:193px;z-index:20;
transition-property:width,height,z-index;
transition-duration:0.4s;
}

ul li a:hover img{
width:292px;height:242px;
z-index:100;
}

Mon code html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<title>Mon titre</title><style>A {text-decoration : none}</style>
<meta name="Author" content="Mon titre"><meta name="revisit-after" content="15 days">
<meta name="description" CONTENT="Mon titre">
<meta name="keywords" CONTENT="mots clefs">
<META NAME="Creation_Date" content="10-2012">
<link rel="stylesheet" media="screen" type="text/css" href="index.css"/>
</head>

<body>

<center>

<div id="conteneur">

<div id="2bannieremenu"></div>

<div id="2corps">
<ul>
<img src="PSD/cv2.png"></a>
</ul>
<ul>
<li>
<a href="https://www.google.com/?gws_rd=ssl" target="_blank">
<img src="PSD/loupe.png" alt="Agrandir et visionner mon C.V" />
</a>
</li>

</ul>

<a title="Merci de .." href="www.google.com"
class="rollover1"></a>
<a title="titres" href="web.html"
class="rollover2"></a>
<a title="Contact, faire établir un devis gratuit..." href="devis.html"
class="rollover3"></a>
<a title="Retour vers la page d'accueil." href="index.html"
class="rollover4"></a>

</div>

<div id="2bas">

<a href="mailto:xxx@aol.com">Me contacter (devis gratuit)</a> |
<a href="www.google.com" target="_blank">Télécharger mon C.V</a>

</div>
</div>

</body>
</html>

Merci par avance !!!!

4 réponses

  1. J'ai réussi à réparer les erreurs ! Je ne sais pas comment, j'ai juste repris le code à zéro... Merci quand même pour les conseils (que j'ai suivis !)
    1. Essaye de supprimer les historiques de IE et firefox et après regarde ce que ca donne sur les deux navigateurs.

      Ca m'arrive parfois quand je fais une mise a jour, j'arrive a la voir sur firefox mais pas sur IE
      1. Bonjour,
        Ie 9. En fait, mes backgrounds n'apparaissent pas, et le contenu est totalement en vrac... Je ne comprends pas pourquoi, vraiment !
        1. tu parles de quel ie ?

          si c'est du 6 oublis et sinon on fait plutôt l'inverse

          on fait le css sur firefox et ensuite on va se qui cloche sous ie

          ie n'est tellement pas logique que ca peut être difficile