Compatibilité IE/Firefox/Google chrome

dori2004 -  
 khawla -
Bonjour

Je suis débutante dans la création du site web. Mon site marche très bien sous IE et GC mais pas Firefox. Pourriez-vous m'aider svp ?

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="fr">
<title>Page d'accueil</title>
<link rel="stylesheet" type="text/css" href="style_xilo.css" media="all"//>
</head>

<body>

<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Portfolio</a></li>
<li><a href="#3">News</a></li>
<li><a href="#4">Labs</a></li>
<li><a href="#5">Contact</a></li>
</ul>

<h1> Bonjour </h1>


</body>

</html>



Code css

html
{ background: #2A2A2A;
font: 1.1em sans-serif;
}

ul
{ display: table;
width: 500px;
margin: 100px auto;
padding: 0;
background: linear-gradient(deepskyblue, dodgerblue);
background: -webkit-linear-gradient(deepskyblue, dodgerblue);
background: -moz-linear-gradient(deepskyblue, dodgerblue);
background: -ms-linear-gradient(deepskyblue, dodgerblue);
background: -o-linear-gradient(deepskyblue, dodgerblue);
background: linear-gradient(deepskyblue, dodgerblue);
background: dodgerblue;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
}

li
{ display: table-cell;
}



ul li a
{
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
0 -1px 0 hsl(210, 100%, 32%) inset,
0 -2px 0 hsl(210, 100%, 38%) inset,
0 -3px 0 hsl(210, 100%, 44%) inset,
0 -4px 0 hsl(210, 100%, 50%) inset,
0 -5px 0 hsl(210, 100%, 60%) inset;
transition: padding .3s, background .3s;
transition: all .3s;
transition: padding .3s;
transition: all .3s .1s;
position: relative;
}


ul li:first-child a
{
border-radius: 3px 0 0 3px;
}
ul li:last-child a
{
border-radius: 0 3px 3px 0;
}

ul li a:hover,
ul li a:focus
{
background: rgba(255,255,255,.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
0 -1px 0 hsl(210, 100%, 42%) inset,
0 -2px 0 hsl(210, 100%, 48%) inset,
0 -3px 0 hsl(210, 100%, 54%) inset,
0 -4px 0 hsl(210, 100%, 60%) inset,
0 -5px 0 hsl(210, 100%, 70%) inset;
Padding: 8px 25px 17px 25px;
transition: all .3s 0s;
}

ul li a:active
{
background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}


ul li a::before
{
content: '';
position: absolute;
left: 50%;
bottom: 9px;
margin-left: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, .5);
}

ul li a:hover::before,
ul li a:focus::before
{
background: white;
box-shadow: 0 0 2px white,
0 -1px 0 rgba(0, 0, 0, .4);
}

h1
{color : green;
display: table-cell}
A voir également:

1 réponse

Réponse 1 / 1
Ysabe_l Messages postés 12714 Date d'inscription   Statut Contributeur Dernière intervention   277
 
Bonjour,

Et quel est le soucis avec Firefox ?
Je veux dire message d'erreur ? Si oui lequel. Affichage différent ? Si oui description. Page blanche ? Autre chose ?
0
Ysabe_l Messages postés 12714 Date d'inscription   Statut Contributeur Dernière intervention   277
 
J'ai testé ton code dans IE et Firefox et j'ai eu exactement la même chose sur les deux. Tu as quelle version de Firefox ?
0
dori2004
 
Avec IE et Google Chrome : ca marche parfaitement : j'ai des onglets bien définis ... mais avec Firefox : c'est une liste déroulante.

Merci d'avance
0
Ysabe_l Messages postés 12714 Date d'inscription   Statut Contributeur Dernière intervention   277
 
Avec Firefox j'ai la même chose que sur Chrome et IE c'est pour que ça que je te demandais ta version de Firefox.
0
khawla
 
j'ai la même Problème mais avec Firefox le schadow s'affiche bien contrairement au chrome et Torch et IE SVP pouvez vous m'aider? Merci
0