Aide probleme IE vers Firefox css

Fermé
provi65 Messages postés 2 Date d'inscription samedi 13 octobre 2012 Statut Membre Dernière intervention 14 octobre 2012 - 13 oct. 2012 à 21:12
 provi65 - 16 oct. 2012 à 01:28
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 !!!!
A voir également:

4 réponses

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
13 oct. 2012 à 22:54
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
0
provi65 Messages postés 2 Date d'inscription samedi 13 octobre 2012 Statut Membre Dernière intervention 14 octobre 2012
14 oct. 2012 à 17:26
Bonjour,
Ie 9. En fait, mes backgrounds n'apparaissent pas, et le contenu est totalement en vrac... Je ne comprends pas pourquoi, vraiment !
0
Rullen Messages postés 146 Date d'inscription mercredi 18 juillet 2012 Statut Membre Dernière intervention 19 mars 2015 37
14 oct. 2012 à 18:58
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
0
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 !)
0