|
|
|
|
Bonjour,
Le code line-height ne fonctionne pas sur Firefox mais bien sur Ei.
Merci de m'apporter une précision à ce sujet.
voir différence: http://www.biereau.be (avec et sans)
Configuration: Windows XP Firefox 3.0.12
Euh…
|
Voila ce que ça donne chez-moi:
|
Okok
|
Merci pour ta réponse super détaillée....
|
Il y a peut-être un conflit dans mon CSS qui n'est pas détecté par Ie7...
body {
margin: 0;
padding: 0;
color:#000000;
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 13pt;
text-align: left;
background-color: #F3FFF0;
line-height: normal;
}
td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 13pt;
text-align: left;
}
img {border: none;}
a {
color: #35B;
text-decoration: none;
}
a:hover {
color: #FF0000;
}
#page {
background-color:#FFF;
border: solid 1px #CCC;
border-top: none;
background-color: #FFF;
width: auto;
margin: 0 auto 16px auto;
border-left: 1px solid #777;
border-right: 1px solid #777;
padding: 0;
text-align: left;
}
#side {
width: 180px;
float: right;
margin:0;
padding: 5px 10px 5px 10px;
}
#main {
width: 676px;
float: left;
margin:0;
padding: 7px;
text-align: justify;
}
#break {
clear: both;
}
#top h1 {
margin: 0;
padding: 0 0 0 10px;
color: #FFF;
font-size: 24px;
}
#top h2 {
margin: 0;
padding: 4px 0 5px 10px;
color: #EEF;
font-size: 90%;
}
/* Menu */
.zul {
padding: 0;
margin: 10px 0 0 0;
list-style: none;
}
.zli1,.zli2,.zli3,.zli4 {
background-image: url(deco/pge0.png);
background-repeat: no-repeat;
padding-left: 14px;
}
.zon {
background-image: url(deco/pge1.png);
}
.zli1 {
margin-left: 0px;
}
.zli2 {
margin-left: 16px;
}
.zli3 {
margin-left: 32px;
}
.zli4 {
margin-left: 48px;
}
/* styles zite */
#zadmin {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 3px 0 0 0;
}
.ztable {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 5px 0;
width: 100%;
}
.zalert {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 2px;
}
input { font-size:12pt; font-family:Arial; }
textarea { font-size:12pt; font-family:Arial; }
select { font-size:12pt; font-family:Arial; }
h1 {font-size:25pt; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif ; color:#33CC00; text-align: center; }
h2 {
font-size:20pt;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#66FF99;
margin-left:30px;
}
h3 {font-size:15pt; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#000000; text-indent:0.5cm;}
h5 {font-size:8pt; font-weight:normal; font-family:Arial, Helvetica, sans-serif; color:#999999; text-align: center;}
h6 {
font-size:15pt;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
color:#33CC00;
text-align:justify;
margin-left:80px;
font-style: italic;
line-height: 1.5em;
}
.minitexte {
font-size: 9px;
line-height: 1em;
color: #999999;
}
.info1erepage {
background-color: #FFFFFF;
width: 258px;
border: thin outset #CCCCCC;
padding: 1;
}
.petittexte {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1em;
}
.Textemoyen {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.date {
font-size: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #66FF99;
}
.miseajour {
font-size: 8px;
line-height: 1em;
color: #999999;
}
.petittitre-vert {
font-size: 19px;
font-family: Arial, Helvetica, sans-serif;
color: #b8f9ac;
font-weight: bolder;
letter-spacing: 1%;
margin-top: 1px;
}
.petittexte_1em {
font-size: 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1em;
}
.Titre_1ere_page {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #33FF99;
font-weight: bolder;
text-shadow: 1 em;
text-align: center;
}
Code du Menu : .menu{
position:absolute;
display:block;
margin:0;
padding:0;
width:auto;
left: auto;
right: auto;
vertical-align: middle;
height: auto;
font:Arial, Helvetica, sans-serif
font-size:13pt;
}
.menu ul{
position:absolute;
display:block;
width:500px;
/*margin:0;*/
padding:0;
font:Arial, Helvetica, sans-serif
font-size:13pt;
}
.menu li ul{
visibility:hidden;
}
.menu li li ul{
position:absolute;
margin-left:124px;
margin-top:-23px;
}
.menu li{
list-style:none;
width:124px;
height:auto;
display:inline;
display/**/:block;
float:none;
float/**/:left;
margin:0;
padding:0;
}
.menu li li{
display:block;
float:none;
background-color: #CCCCCC;
}
/* correct a little IE bug */
* html .menu li li{
display:inline;
}
.menu a{
text-align:center;
background-color: #33FF66;
border:1px #666 solid;
color:#000;
display:block;
width:120px;
text-decoration:none;
padding:2px 0;
margin:1px;
font:Arial, Helvetica, sans-serif
font-size:13pt;
}
.menu a:hover{
background-color: #eee;
border:1px #aaa solid;
font:Arial, Helvetica, sans-serif
font-size:13pt;
}
.menu a:focus{
background-color: #0066FF;
}
a.linkOver{
background-color: #33FF66;
background-image: none;
}
entete {
background-color: #CC0033;
}
Merci |
Oulà…
input { font-size:12pt; font-family:Arial; }
textarea { font-size:12pt; font-family:Arial; }
select { font-size:12pt; font-family:Arial; }
tu peux le remplacer par : input, textarea, select { font-size:12pt; font-family:Arial; }C'est la même chose.
Ensuite, pas la peine d'un test navigateur. Il se trouve depuis toujours, il y deux types de navigateurs. -Ceux qui respectent les standard : Tous sauf IE. -Et ceux qui ne les respectent pas : IE. Évidement, tout le monde utilise IE, donc on ne peut pas le négliger dans les fabrications de sites web… (Perso j'ai eu d'énormes problèmes pour mon site (menu css, positionnement, bordures, etc). Mais à l'époque où IE était encore pire que aujourd'hui (si si!) Microsoft à mis en place les commentaires conditionnels. C'est quoi? Dans un langage de programmation, les commentaires sont là pour aider l'utilisateur. Ils ne sont pas utilisé par le programme. Dans le HTML, les commentaires ne sont pas interprétés par le navigateur. Les commentaires conditionnels sont des commentaires comme un autre pour tous les navigateurs… Sauf pour IE! Qui lui seul les affichent!! Ainsi On peut mettre du code HTML entre commentaires conditionnels pour qu'il soit interprété par IE et pas les autres, ou au contraire permettre à tous de les afficher et pas IE. les commentaires conditionnels sont de la forme <!--[if lte IE 7]> bla bla bla <![endif]--> par exemple, le "blablabla" sera affiché par aucun navigateur mis à part IE 7 et les versions antérieurs (lt : "little" (petit) ; "e" (dans "lte" signifie "equal" donc "lte" est "plus petit ou égal" ; IE7 est la version.) Si tu veux faire un commentaire pour les versions plus récentes que IE5.5 : "gt IE 5.5" (plus récentes strictement, donc IE5.5 exclu) Pour faire in commentaire conditionnel pour tous les IE : "<!--[if IE]> … <![endif]-->" Il existe tout un tas d'options : (voir là) J'en utilises quelques une sur mon site (voir lien dans mon profil) par exemple, affiches le site avec Firefox, puis avec IE7. Tu verra 2 différences : -un petit mot pour demander de laisser tomber IE et de mettre à jour ou changer. -dans firefox, il s'affichera une citation en haut à droite. Par ce que IE8 ne l'affichait pas correctement, je le cache aux utilisateurs de IE. Tu peux librement regarder dans les codes sources. Un dernier truc : les commentaires conditionnels ne s'appliquer qu'a du HTML, donc pas aux CSS!! mais y'a un moyen très simple. Dans le "<head>" tu met <!--[if IE]> <link rel="stylesheet" type="text/css" href="indexIE.css" /> <![endif]-->pour une feuille CSS spéciale IE et <!--[if !IE]> <--> <link rel="stylesheet" type="text/css" href="index.css" /> <!--><![endif]--> pour une feuille CSS "normale" Windows : il y a mieux... mais c'est moins cher. |
Merci pour l'info..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Merci |