Aide probleme IE vers Firefox css
provi65
Messages postés
2
Statut
Membre
-
provi65 -
provi65 -
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 !!!!
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
-
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 -
Bonjour,
Ie 9. En fait, mes backgrounds n'apparaissent pas, et le contenu est totalement en vrac... Je ne comprends pas pourquoi, vraiment ! -
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 -
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 !)
