Aide probleme IE vers Firefox css
provi65
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
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 !!!!
A voir également:
- Aide probleme IE vers Firefox css
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Telecharger firefox - Télécharger - Navigateurs
- Exporter favoris firefox - Guide
- Ie tab firefox - Télécharger - Outils pour navigateurs
- Windows 7 vers windows 10 - Accueil - Mise à jour
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
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 !
Ie 9. En fait, mes backgrounds n'apparaissent pas, et le contenu est totalement en vrac... Je ne comprends pas pourquoi, vraiment !
